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文件