CssSyntaxError (2:1) Unknown word 1 | > 2 | var content = require("!!./index.css");

项目引入css文件后报错

Module build failed (from ./node_modules/_css-loader@2.1.1@css-loader/dist/cjs.js):
CssSyntaxError

(2:1) Unknown word

1 |
> 2 | var content = require("!!./index.css");
| ^
3 |
4 | if(typeof content === 'string') content = [[module.id, content, '']];

@ ./src/index.js 3:0-24

webpack.config.js代码:

module.exports = {
  entry: './src/index.js',
  output: {
    // path.resolve解析当前相对路径的绝对路径 path.join
    // path: path.resolve('./dist/'),
    path: path.join(__dirname, './dist/'),
    filename: 'bundle.js'
  },
  mode: 'development', // 默认production
  // watch: true // 开启监视模式
  devServer: {
    open: true,
    port: 8080,
    compress: true,
    hot: true
  },
  module: {
    rules: [{
      test: /.css$/,
      use: ['css-loader', 'style-loader']
    }]
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './src/index.html'
    })
  ]
}

后来看了一下另一个项目,发现use的顺序放得不一样,修改为

module: {
    rules: [{
      test: /.css$/,
      use: ['style-loader', 'css-loader']
    }]
  },

再次运行就可以了,

// webpack读取loader时,是从右到左

// loader执行顺序是从右到左以管道方式链式调用

// css-loader解析css文件,style-loader放到html文件