vue.config.js webpack配置 px2rem-loader自适应处理
config.module.rule('svg').exclude.add(resolve('src/icons')).end()config.module.rule('icons').test(/\.svg$/).include.add(resolve('src/icons')).end().use('svg-sprite-loader').loader('sv...
·
法一:webpack配置
config.module
.rule('svg')
.exclude.add(resolve('src/icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
})
.end()
// set preserveWhitespace
config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.preserveWhitespace = true
return options
})
.end()
config.module
.rule('scss')
.oneOf('vue')
.use('px2rem-loader')
.loader('px2rem-loader')
.before('postcss-loader') // this makes it work.
.options({ remUnit: 36, remPrecision: 8 })
.end()
法二:vue的main.js添加
// 设定body文字尺寸
const setHtmlFontSize = () => {
// 640 默认设计稿大小; 640px = 6.4rem ;每个元素px基础上/100
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 得到html的Dom元素
const htmlDom = document.getElementsByTagName('html')[0];
// 设置根元素字体大小
htmlDom.style.fontSize = htmlWidth / 6.4 + 'px';
};
window.onresize = setHtmlFontSize;
setHtmlFontSize();
更多推荐
已为社区贡献19条内容
所有评论(0)