Vue2.6.11+Webpack4.42.1移动端项目使用px2rem-loader报错

本文主要是介绍Vue2.6.11+Webpack4.42.1移动端项目使用px2rem-loader报错，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

错误如下

Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: undefined:21:3: missing '}'

我原来的webapck.config.js配置里是这么写的：

module: {
    rules: [
    {
        test: /\.less$/,
        use: [
          {
            loader: devMode ? "vue-style-loader" : MiniCssExtractPlugin.loader,
            options: {
              public: "../dist/css",
              hmr: devMode
            }
          },
          "css-loader",
          "less-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: [require("autoprefixer")]
            }
          },
          {
            loader: "px2rem-loader",
            options: {
              remUnit: 75,
              remPrecision: 8
            }
          }
        ]
      }
]}

看了px2rem-loader的issues里作者说px2rem不太适用，建议换成PostCSS。https://github.com/Jinjiang/p...

解决办法：

安装postcss-px2rem

npm i -D postcss-px2rem

webapck.config.js配置：
把less里的px2rem-loader配置去掉，在vue rules里加上postcss配置就好了。

 module: {
    rules: [
    {
        test: /\.vue$/,
        use: [
          {
            loader: "vue-loader",
            options: {
              compilerOptions: {
                preserveWhitespace: false
              },
              postcss: function() {
                return [px2rem({ remUnit: 75 })];
              }
            }
          }
        ]
      }
    ]
  }

这篇关于Vue2.6.11+Webpack4.42.1移动端项目使用px2rem-loader报错的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！