一、安装sass
首先需要一个vue-cli构建的vue项目，如何创建这里不多赘述，需要的同学请看 官方文档 。
我的项目是npm做包管理的，所以后面默认使用npm命令。
接下来安装 node-sass 这个插件，同时安装 sass-loader ，在控制台键入命令：
npm i --save-dev node-sass sass-loader
等待安装完成，在 build 文件夹下的 webpack.base.conf.js 的 rules 里面添加配置
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
在需要使用sass/scss的组件中修改style标签：
<style lang="sass"></style>
scss的话就是
lang="scss"
到目前为止，sass已经可以在我们的项目里使用了！
but，这里有问题，具体请往后看！！！
二、reset.sass
相信同学们都用过 reset.css 来使各个浏览器的表现效果一致，这里先推荐一个好用的网址给大家：
https://meyerweb.com/eric/tools/css/reset/
可以把这个文件改成sass格式，在src目录下创建以下文件结构：
common/sass/
把刚刚的sass文件放到这个文件夹下（个人习惯，也可以在assets文件夹下直接创建这个sass文件夹）。
在有需要的组件里引入:
@import "reset.sass的相对路径"
这样就可以成功使用reset.sass了。
但是，这样也太复杂了，每个需要引入的组件都加这样一条语句，首先这样写代码肯定是不优雅的，
其次，在浏览器中打开控制台，同学们会发现，reset.scss被引入了好多次，这样打包的时候会使得项目很大，耦合很多。
怎么解决？
三、全局sass
在 main.js 里直接引入就好啦，好的，我们这样写：
import '@/common/sass/reset.sass'
然而，报错了，具体的报错信息现在没办法复盘了，大体是讲找不到这个文件
左看右看，左看右看，这个文件路径丝毫没问题啊，怎么就报错了呢？
网上搜了搜，终于发现了问题所在：
原来新版的vue-cli已经帮我们配置好了sass，就在 build 目录下的 utils.js 中，大家将目光聚焦到第15行
export.cssLoaders这里，最后的return里有这样两个东西
sass:generateLoaders('sass', {indentedSyntax:true }),
scss:generateLoaders('sass'),
具体的不多解释，那么再回想一下我们在最开始的时候也配置了sass，两者引起了webpack的冲突
好的，把刚刚那段删掉，应该成功了！！！
嗯！嗯？又报错了，再看看报错信息，大体是说mixin的变量啥的未定义之类的问题，
好吧，我偷了个懒，把sass的function和mixin都放在了reset.sass里，没有用，哭了，怎么办？
四、sass-resources-loader
首先把reset.sass拆分，把变量、函数和mixin分别拆分出来形成三个文件：vars.sass、func.sass 和 mixin.sass
有个插件叫 sass-resources-loader ，官网的介绍：
This loader will @import your SASS resources into every required SASS module. So you can use your shared variables & mixins across all SASS styles without manually importing them in each file.
网上又搜了搜，发现sass-resources-loader的教程还挺多，心中很开心，好，照着抄！
参考：https://www.jianshu.com/p/5c3d457fbec9
tips：无意冒犯大佬，可能是项目版本问题，又失败了！！！
忍痛看官网的英文文档：https://www.npmjs.com/package/sass-resources-loader
更新了还是咋回事儿？官网推荐vue-cli@2的做法是
在 build/utils.js 42行往后添加以下代码
if (loader === 'sass') {
loaders.push({
loader: 'sass-resources-loader',
options: {
resources: 'path/to/your/file.scss',
},
});
}
其他版本参考：官方文档
新的错误：
Something wrong with provided resources. Make sure ‘options.resources’ is String or Array of Strings.
说这里的resources.options只能是字符串或字符串数组，
额，挠挠头，不就是字符串么，现在？
一行一行看报错信息，想想，好像webpack解析路径不能直接这么写，修改如下:
resources: path.resolve(__dirname, '../src/common/sass/mixin.sass')
PS：数组的话这样写：
resources: 【
path.resolve(__dirname, '../src/common/sass/mixin.sass')，
// .....
】
好了，一切成功！！！
五、结语
作为前端新人，第一次写技术博客，肯定有很多讲的不到位或是不求甚解的地方，希望大佬们不吝赐教，及时为我指出，鸣谢！
但也希望这篇文章能够帮助同学们成功爬坑，如果对您有所帮助，请关注、点赞并收藏，有其他问题也可以留言或私信，欢迎讨论！
网友评论