目录
- 开篇
- 用sass代替css
- 全局style处理
-
- 目录结构
- 自动在main.js中导入to-css中的全部scss文件
- 自动注入mixin和变量到各.vue文件
开篇
本文是Vue最佳实践系列的第一篇，整个系列将会分享我自己在使用vue过程中自己总结的以及吸取来的vue“最”佳实践策略。
第一篇文章准备介绍css的最佳实践，因为css是前端技术栈里面最简单的部分，所以我觉得从这里入手还挺合适的。
用sass代替css
对sass不了解的读者请务必阅读下官方文档来了解下sass究竟多强大！
配置方式如下：
- 安装各种loader
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm install style-loader --save-dev
-
自动格式化.scss文件
我的编辑器是vscode，想实现这个目标需要安装名为CSScomb的插件。之后做些配置。具体安装和配置方式参考这篇博文
其中几个参数的含义如下：
"always-semicolon": true, // 在每个样式后面加“;”
"block-indent": " ", // 缩进两个空格
"lines-between-rulesets": 1, // 每组规则后加一个空行
"space-after-opening-brace": "\n", // 在开始的{后换行
"space-before-closing-brace": "\n", // 在结束的}后换行
"space-before-opening-brace": " ", // 在开始的{前加空格
"space-between-declarations": "\n", // 每个样式后换行
"space-before-colon": " ", //color :red 中的:前加空格
"space-after-colon": " ", //color :red 中的:后加空格
另外，不要忘记勾选Auto format on save选项，这样在保存scss文件的时候就会自动格式化。
全局style处理
目录结构
在@/src/styles 目录下设置如下目录结构
解释一下，我是根据scss的编译目标来区分它们所属的文件夹的。像是scss中的mixin和变量，我总希望它们能被引入到各个.vue文件内，供其他scss使用。
而一般的scss，比如全局样式等，我希望它可以被编译成css并引入到全局，最终供各标签使用。因此我分成两个文件夹，供其他scss使用的放到to-css中，供各标签使用的放到to-scss中。
再多说一点，免得读者一头雾水。scss的整个编译流程是这样：
- sass-resources-loader将to-scss文件夹内的scss文件自动引入到各个.vue文件内。以上图的scss文件为例，可以理解为自动在每个vue文件添加如下代码：
【Vue最佳实践】css开篇用sass代替css全局style处理自动注入mixin和变量到各.vue文件 - to-css文件夹内的index.js文件会将 to-css文件夹内全部scss文件引入到全局。
- 之后sass-resources-loader会将@include test替换为实际的scss文本。(这一步只是简单的文本替换而已)
- 最后sass-resources-loader将scss编译为css即可。
自动在main.js中导入to-css中的全部scss文件
除了上面几个scss文件外，今后可能会不断添加新的scss，如果每次都手动在main.js引入未免过于繁琐。因此这里使用webpack做一个自动导入。
在@/src/styles/to-css 目录下继续创建一个文件，名为index.js。写入如下代码：
const req=require.context('./',false,/\.scss$/);
req.keys().map(key=>{
req(key);
})
之后就只需要再main.js引入index.js一个文件即可，如下:
自动注入mixin和变量到各.vue文件
一般来说，我们总是希望变量和mixin能在各个.vue里面直接使用的，而不是每次都手动引入。这点可以借助 sass-resources-loader 来实现。配置方法如下。
- 安装
npm install sass-resources-loader --save-dev
-
修改vue.config.js文件
如果读者的项目中没有这个文件则需要先在项目根目录下手动创建它。具体里面要写什么内容的话，请参考这里。
如果读者不清楚chainWebpack的写法可以先参考这篇文档，之后要想进一步学习可以参考这篇文档。