How to configure px2rem-loader? for vue-cli3.0 Several positions were reported to be wrong.

according to the documentation, px2rem-loader should be configured in vue.config.js, and I started to put it in css.loaderOption, yunq

< hr >

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

< hr >

then prompt Invalid options in vue.config.js: child "css" fails because [child "loaderOptions" fails because ["px2rem" is not allowed]]

can"t even be put on chainWebpack. Is there a big god who can post a code for me to look at or provide a document for me to see?

Vue-cli webpack vue.js javascript

Feb.07,2022

solution refer to my multi-page scaffolding: 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 cannot be configured. Without this item, source code 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
      })

}

the css, is written in the configuration, so the px in my less has not been converted into rem,. If I replace css with less, your npm run serve will report an error. How to configure less?

less is configured as follows

{
                    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'
                    // })
                },

in node_modules/@vue/cli-service/lib/css.js, directly add a "rule"
rule
.use ('px2rem-loader')
.loader (' px2rem-loader')
.options ({emUit: 75})
for scss.

Previous: Can Mini Program copy the picture to the pasteboard?

Next: After changing the value of input, the scrolling position of the background will be changed. Why?