基于 Vue-cli 2.92 版本的一个 demo
- 外部 SASS 、 Vue 文件 SASS 全局 px 2 rem(font size dpr 转换) 配合 flexible.js 使用
- 支持全局 SASS Mixin,不用单独 import
- 配置修改简单轻量
-
build/utils.js 中 cssLoaders 方法
-
增加 getPx2remConfig、getSassResources 两个方法
px2rem-dpr-loader 是我个人基于 px2rem-dpr 写的一个 webpack loader
简单而言 就是以 String
或者 Array
配置好需要全局加载的 sass 文件
sass-resources-loader
- 直接编写
css
肯定比通过js
操作样式 要来的高效,可以操作index.html
直接在页面提前写好media
适配 - 为防止
flexible
加载后重新渲染 rootfont-size
,可以修改flexible
中的逻辑,如果flexible
计算的font-size
和media
一致就不再重复设置 - 遇到不想编译的
px
可以使用50.00px
,
原理:
shouldIgnoreRule: function(rule) {
if( /\.00px$/.test(rule.value) )
{
rule.value = rule.value.replace(/\.00px$/, 'px');
return true;
}
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report