在vue项目中配置scss，单文件或全局引入

这是个人第一篇技术性文章，写的估计会很乱，完事开头难嘛，废话不多说，start！
前提，搭建vue的脚手架（多余的废话。。。）
然后，在命令行中输入：
npm install --save-dev sass-loader
(其实我并不懂sass和sass-loader的区别，只知道sass-loader是webpack要用的)
安装完继续敲：
npm install -save-dev node-sass
(这个更别提了，看网上教程说有可能安装失败啥的，我的直接成功，小幸运~)
然后在你的vue项目中找到build文件夹，打开webpack.base.conf.js
找到module{
rules： [
（在这里写入：）
{
test: /.sass$/,
loaders: ['style', 'css', 'sass']
}
]
}
![31MPLM9($[43CGRZ53G52G.png

然后网上的教程是说在.vue文件中的style标签下
<style lang='scss'>就可以了。
切记写到这里之后，再 npm run dev 一下子。
好的，是没有问题的，你可以试一下。
你在style标签下，写入$color:red;
随便找个标签，把它的color设置为$color,看看反应，
我当时是非常欣喜的，你呢？（暴露了我会的东西太少。。。）
结果好景不长，既然sass都用上了，光用它的嵌套和变量也太大材小用了把？
看起来一点也不高大上？ 那我就设置个全局文件把，能少写一行代码是一行。。。
然后继续在./src/assets目录下新建了一个index.scss文件
在里面写入了 $size:50px;
我满怀期待地盼望着页面上的字放大为50px
But！！！！！！ he can't!!!!!!!!
Ctrl+S 按下的一瞬间 报错了~
哦，是我太心急了，还没在.vue文件中引入index.scss文件呢！
继续在style标签下写入 import './assets/index.scss'
Ctrl + S but还是不能！
MMP!一大堆英文，看的我。。。Module build failed:
模块未能成功编译的意思？ （我揣摩的啊。。。个人见解。。。）
开始继续爬坑吧。
开始在百度上搜索 “如何在vue项目中引入scss文件”，
结果出来的都是怎样全局引入scss，好吧 其实我是想单独引入的，别问为什么，强迫症！结果最后全局都能引入了，我还是没学会单独引入的，不过就在写这篇文章的时候，我把这个问题完美解决掉了~share must then！！！

先说单独引入scss的办法：
首先我看了很多 唯独忽略了引入scss文件时候 import前的那个 “@”
MMP！这个也是刚发现的。。。脑残的不像个程序员。。。
接着，你就可以在引入scss的.vue文件中使用引入的里面的各种变量，mixin啊啥的值了！

如果你不想每个组件都引入一下scss文件的话，那就来全局引入吧，我就言简意赅地说一下容易犯错的地方！

网上的解决办法是在build目录下的utils.js文件下找到
scss: generateLoaders('sass'),
把它替换成
scss: generateLoaders('sass').concat(
{
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, '../src/assets/your.scss')
}
}
)

YG~(JH88N6W(7U6D4%H9317.png

// 对于新手来说，上面的your.scss 就是我说的 index.scss，别傻孩子！
（我每次看别人解决办法的时候就容易没耐心，所以提醒一下。。。勿见怪。。。）
感觉动了配置文件的东西 好像都需要npm run dev一下，
结果。。。run不起来了，
提示This dependency was not found:
ou can run: npm install --save !!vue-style-loader!css-loader?{"sourceMap":true}!
依赖未找到，可是我打开pack.json里面 有这两个依赖的啊。。。
好奇怪，是不是因为上面sass-resources-loader的问题呢？
终端继续写入：
npm install sass-resources-loader --save-dev
重新npm run dev
OK！！！
Congratulations！ you success!
之后你在任何一个.vue文件中 只需要在style标签声明 lang=‘scss’
就可以使用scss文件的内容了。
就这样 我们就成功地在vue项目中配置了sass！
我觉得我写的够大白话的了，如果哪里还给你造成困惑的可以联系我，咱们再深入交流_{解决掉你的问题的记得点赞哦}
还等什么？high起来~ I~ am~ superhero~