使用raw-loader读取css文件为字符串，读取不成功

Question

因为需要将css文件import进来，在js中以字符串的形式处理。

使用raw-loader测试读取了txt、css、js文件，只有css读取失败，求解。css文件中只是设置了body的background-color。

import str from 'raw-loader!./style.css';
console.log('read css file-------------------------------------');
console.log(typeof str, str);

webpack.base.conf.js中已配置

Answer 1

webpack 配置

entry:{
        "case7":__dirname+'/index.js',
    },
    output:{
        path: __dirname+'/dist',
        filename:'[name].js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: 'raw-loader'
            }
        ]
    }

index.js中导入css文件

import txt from './file.css'
console.log(txt);

运行结果

Answer 2

楼上正解

import后面跟css文件名就好了，webpack会根据文件的后缀名称自动地使用raw-loader去处理的

Answer 3

后来怎么处理的呀

Answer 4

可以试试这个 https://juejin.cn/post/711014...

解决的问题：

js 想获取样式文件（css、less、scss）中的字符串内容时，可以通过

// npm install raw-loader less-loader
require('!!raw-loader!less-loader!.style.less').default.toString()

的方式获取；但这种方式获取的 css 内容无法压缩。

解决：

// npm install css-loader postcss-loader postcss less-loader
require('!!css-loader?sourceMap=false!postcss-loader?{"postcssOptions":{"plugins":{"cssnano":{}}}}!less-loader!./style.less').default.toString();

优化：

因为 require 无法使用变量，所以每次都需要写很长的前缀；所以将压缩功能封装成一个自定义的 webpack loader，隐藏其中的压缩工作：

raw-loader.js

module.exports = function rawLoader() {
  
}
module.exports.pitch = function(remainingRequest) {
  const loaderUtils = require('loader-utils');
  const requestPath = loaderUtils.stringifyRequest(this, `!!css-loader?sourceMap=false!postcss-loader?{"postcssOptions":{"plugins":{"cssnano":{}}}}!${remainingRequest}`);

  return `module.exports = require(${requestPath}).default.toString();`;
}

使用：

require('!!./raw-loader.js!less-loader!./style.less');
require('!!./raw-loader.js!./style.css');