vue-cli3.0 怎么配置px2rem-loader?放了几个位置都报错

根据文档,px2rem-loader应该是配置在vue.config.js里的,我开始放在css.loaderOption里,yunq


  loaderOptions: {
    px2rem:{
      options:{
        remUnit:75,
        dpr:2
      }
    }
  },
  
 


然后就提示 Invalid options in vue.config.js: child “css” fails because [child “loaderOptions” fails because [“px2rem” is not allowed]]

放在chainWebpack也不行。有大神可以贴个代码我看下或者提供一个文档我看下么?

回答:

解决方案参考我的多页脚手架:https://github.com/dailynodej…

chainWebpack: config => {
    config.module
      .rule('css')
        .test(/\.css$/)
        .oneOf('vue')
        .resourceQuery(/\?vue/)
        .use('px2rem')
          .loader('px2rem-loader')
          .options({
            remUnit: 75
          })
  }

loaderOptions 里面是不能配置的,没有这个项,源码 cli-service/lib/options.js

loaderOptions: joi.object({
      css: joi.object(),
      sass: joi.object(),
      less: joi.object(),
      stylus: joi.object(),
      postcss: joi.object()
    })

回答:

chainWebpack: config => {

config.module
  .rule('less')
    .test(/\.less$/)
    .oneOf('vue')
    .resourceQuery(/\?vue/)
    .use('px2rem')
      .loader('px2rem-loader')
      .options({
        remUnit: 75
      })

}

配置里面写的css,所以我的less里面的px都没有被转换成rem,我把css替换成less,你npm run serve 就会报错,请问要支持less怎么配置?

回答:

less配置如下

{
                    test: /\.less$/,
                    // use: ExtractTextPlugin.extract({
                    use: ['style-loader', 'css-loader', {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                require('autoprefixer'),
                                //require('cssnano'),<= 需去掉,因为会去掉注释
                                require('postcss-px2rem')({
                                    remUnit: 75
                                })
                            ],
                        }
                    }, 'less-loader']
                    //     fallback: 'style-loader'
                    // })
                },              

回答:

在node_modules/@vue/cli-service/lib/css.js中,直接添加一个”rule”
rule
.use(‘px2rem-loader’)
.loader(‘px2rem-loader’)
.options({emUit: 75})
针对scss都会转化;

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注