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

巴特西

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

最新文章

热门文章