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?
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.
