vue中px转换成rem
程序员文章站
2022-04-11 11:47:17
...
vue中px转换rem
1.npm i lib-flexible px2rem-loader --save
2.main.js导入 import ‘lib-flexible/flexible’
3.在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,
如:
/*const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
} */
将上边代码块注释换成下边这样的代码:
const cssLoader = {
loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 32 //根据psd的尺寸 /10 得来
// remUnit一般为32,这样可以适应任何宽度的手机屏幕
}
}
同时,在generateLoaders方法中添加px2remLoader,代码如下:
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
配置完成之后,重启项目,就可以在vue脚手架中正常使用px来编写代码,这个会自动将px转换成rem。
上一篇: 移动端适配将px转换成rem
下一篇: 有关Python的内容