vue移动端配置自适应,全局自动转换px单位
1、下载lib-flexiblenpm i lib-flexible --save2、在main.js中引入lib-flexibleimport 'lib-flexible/flexible'3、安装postcss-px2remnpm i postcss-px2rem --save4、安装px2rem-loadernpm i px2rem-loader --sa...
·
1、下载lib-flexible
npm i lib-flexible --save
2、在main.js中引入lib-flexible
import 'lib-flexible/flexible'
3、安装postcss-px2rem
npm i postcss-px2rem --save
4、安装px2rem-loader
npm i px2rem-loader --save
5、配置px2rem-loader
在build/utils.js找到generateLoaders方法,添加以下配置:
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5
}
}
// generate loader string to be used with extract text plugin
function generateLoaders (loader, loaderOptions) {
var loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath:'../../',
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
设置完成后重启项目,打开浏览器,可以看到px已经被转化成rem
更多推荐
已为社区贡献10条内容
所有评论(0)