webpack安装less报错

吃鱼的猫
  • 3
新手上路,请多包涵

我的用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()] } }

注释掉了有不报错了

回复
阅读 2.9k
2 个回答

这是我的less配置,你试试

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏