在使用scss这种css预处理语言的时候，@import的语法还是经常要使用的，我们把通用的样式，比如颜色变量，还有函数之类的单独用一个文件里，在其他页面的scss里面引入。在vue项目里面会写很多的组件，如果每个组件的地方我们都写一个@import，还挺麻烦的，而且如果我们以后要改这个scss文件的位置或者文件名，就要一个个组件改过去。
举个例子，我在项目中使用了vm+rem的方式实现自适应，
设计稿的图大小是1920*1080，我们把html根节点字体大小设置为1vw，vw就是视窗大小的百分之一，所以在1080p显示器的场景下，1rem=1vw=19.2px。vw这个单位可以随着视窗的大小改变而改变，同时根节点字体大小和rem也跟着改变，所以就实现了自适应。还有考虑到chrome支持的最小字体显示是12px，我们用媒体查询把1200px宽度以下的视窗，设置成12px。因为我的项目主要应用在一些大屏，分辨率基本上会高于720p，所以这样就可以满足需求了。
html {
// vw+rem方式实现自适应缩放，vw应用到html根节点的字体大小，这样就不用写js来实现根据屏幕宽度动态设置根节点的字体大小了。性能也会更强
// 相比只使用vw进行设置的方法，如果以后需要更多兼容性，改成纯rem布局也很方便。vw是和视窗宽度绑定的数值无法自由设置，rem依赖的根节点宽度是可以自由设置的，所以自由度更高
font-size:1vw;
// 媒体查询，当设备宽度小于1200px的时候，最小的字体大小为12px，因为chrome字体最小为12px，这样可以保证不同设备字体大小一致
@media screen and (max-width: 1200px) {
font-size:12px;
}
}
运用rem来设置元素大小，我们需要把设计稿中的像素大小换算成rem，因为我们也引用了scss，所以就不用麻烦自己算了，用scss的函数功能就比较方便了。
我们设计下面的函数就能满足需求，只需要在用到大小的地方把调用这个函数，把原来px单位的数据传入即可
//functions.scss
// 转换px为rem单位，这个函数用到的rem是使用vw实现的，原型图的宽度是1920，所以1rem单位设置为1vw也就是19.2px。
@function px2rem($px) {
@return $px/19.2 + rem;
}
项目用到了@vue/cli，vue版本2.x，vue-cli的文档里面自动引用css预处理文件推荐的是一个 style-resources-loader，但是这个项目它给的示例是个stylus的示例，没有给你scss相关的例子。。。。
我把它的例子改了一下，似乎也可以用了(第一次碰到的时候不知道是出了什么bug，样式没有正常显示)，
const path = require('path')
module.exports = {
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type => addStyleResource(config.module.rule('scss').oneOf(type)))
},
}
function addStyleResource (rule) {
rule.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [
path.resolve(__dirname, './src/styles/functions.scss'),
],
})
}
还有就是sass官方搞的loader， sass-resources-loader，官方搞的应该还是能保证稳定性的，它的github页面也给了好几个示例，其中就有vuecli用的，直接复制过来就行
// vue.config.js
module.exports = {
chainWebpack: config => {
const oneOfsMap = config.module.rule('scss').oneOfs.store
oneOfsMap.forEach(item => {
item
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
// Provide path to the file with resources
resources: './path/to/resources.scss',
// Or array of paths
resources: ['./path/to/vars.scss', './path/to/mixins.scss', './path/to/functions.scss']
})
.end()
})
}
}
关于css预处理器的选择：
sass是最早的css预处理器，经过很长时间的检验应该是稳定性最高的了，less据说特性会比sass少一些，stylus是比较新的12年出的css预处理器，写法可以比较随意，分号，花括号都可以不要，用缩进来表示层级。
而scss是sass最新的版本，语法兼容了普通css的写法，也就是说，和普通css的切换就没有成本了，个人来说不喜欢在css里面搞很多胡里花哨的东西，js就够你玩得很胡里花哨了，所以和标准css写法一样这一点，就很好，括号和分号写起来也麻烦不到哪里去，加上稳定性高这一点，所以我最后选择使用scss，而且常用的bootstrap和elementUI也是用的scss。
网友评论