博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue配置px转rem
阅读量:5101 次
发布时间:2019-06-13

本文共 799 字,大约阅读时间需要 2 分钟。

1.下载lib-flexible

npm i lib-flexible --save

2.在index.html中

<html data-dpr = '1'>
在common.css中写  
html {
font-size: 10vw;
}

3.设置meta标签

4.安装px2rem-loader

npm install px2rem-loader

5.配置px2rem-loader

在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,如:

const cssLoader = {

loader: 'css-loader',
options: {
minimize: process.env.NODE_ENV === 'production',
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75
}
}

 

同时,在generateLoaders方法中添加px2remLoader

function generateLoaders (loader, loaderOptions) {

const loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}

 

6.重启,一切ok~

npm run dev

 

转载于:https://www.cnblogs.com/miaSlady/p/9952642.html

你可能感兴趣的文章
SDN第四次作业
查看>>
DM8168 DVRRDK软件框架研究
查看>>
django迁移数据库错误
查看>>
yii 跳转页面
查看>>
洛谷 1449——后缀表达式(线性数据结构)
查看>>
[最小割][Kruskal] Luogu P5039 最小生成树
查看>>
Data truncation: Out of range value for column 'Quality' at row 1
查看>>
Dirichlet分布深入理解
查看>>
(转)Android之发送短信的两种方式
查看>>
python第九天课程:遇到了金角大王
查看>>
字符串处理
查看>>
ECharts(Enterprise Charts 商业产品图表库)初识
查看>>
LeetCode Factorial Trailing Zeroes (阶乘后缀零)
查看>>
hdu 5402 Travelling Salesman Problem (技巧,未写完)
查看>>
[AIR] 获取U盘,打开U盘
查看>>
HtmlUnitDriver 网页内容动态抓取
查看>>
ad logon hour
查看>>
获得进程可执行文件的路径: GetModuleFileNameEx, GetProcessImageFileName, QueryFullProcessImageName...
查看>>
证件照(1寸2寸)拍摄处理知识汇总
查看>>
罗马数字与阿拉伯数字转换
查看>>