webpack安装less报错

Question

我的用webpack4配置react的时候安装less依赖，遇到问题这是webpack.config.js  use: [       {        loader: MiniCssExtractPlugin.loader,        options: {          publicPath: '../'         }       },       { loader: "css-loader"},       { loader: "style-loader" },       { loader: "postcss-loader", options: { plugins: () => [autoprefixer()] } }     ]不知道为啥报错，找了很久也没找到解决办法ERROR in ./src/pages/home/home.less (./node_modules/css-loader/dist/cjs.js!./node_modules/style-loader!./node_modules/postcss-loader/src??ref--4-3!./src/pages/home/home.less) Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError (2:1) Unknown word  1 | > 2 | var content = require("!!../../../node_modules/postcss-loader/src/index.js??ref--4-3!./home.less");     | ^  3 |  4 | if(typeof content === 'string') content = [[module.id, content, '']];但是当我把      { loader: "style-loader" },       { loader: "postcss-loader", options: { plugins: () => [autoprefixer()] } }注释掉了有不报错了

Answer 1

如果按照你配置的loader顺序，webpack首先会用postcss-loader去处理你的样式文件，如果你的样式用的是less，那么应该把less-loader放在最后边。webpack用loader处理文件的时候是倒着来的顺序。或者你把postcss-loader的配置放到css-loader的配置之上，试试

Answer 2

这是我的less配置，你试试

 {    test: /\.(css|less)$/,
    use: [      'style-loader',      'css-loader',      'postcss-loader',
      {
        loader: 'less-loader',
        options: {
          javascriptEnabled: true,
        },
      },
    ],
  }