一、安裝sass
首先需要一個vue-cli構(gòu)建的vue項目梦抢，如何創(chuàng)建這里不多贅述般贼，需要的同學(xué)請看?官方文檔?。
我的項目是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已經(jīng)可以在我們的項目里使用了绩脆！
but萤厅，這里有問題，具體請往后看Ｑテ取Ｌ栉丁！
二玉锌、reset.sass
相信同學(xué)們都用過?reset.css 來使各個瀏覽器的表現(xiàn)效果一致名挥，這里先推薦一個好用的網(wǎng)址給大家：
https://meyerweb.com/eric/tools/css/reset/
可以把這個文件改成sass格式，在src目錄下創(chuàng)建以下文件結(jié)構(gòu)：
common/sass/
把剛剛的sass文件放到這個文件夾下（個人習(xí)慣主守，也可以在assets文件夾下直接創(chuàng)建這個sass文件夾）禀倔。
在有需要的組件里引入:
@import "reset.sass的相對路徑"
這樣就可以成功使用reset.sass了。
但是参淫，這樣也太復(fù)雜了救湖，每個需要引入的組件都加這樣一條語句，首先這樣寫代碼肯定是不優(yōu)雅的涎才，
其次鞋既，在瀏覽器中打開控制臺，同學(xué)們會發(fā)現(xiàn)，reset.scss被引入了好多次邑闺，這樣打包的時候會使得項目很大跌前，耦合很多。
怎么解決检吆？
三舒萎、全局sass
在?main.js 里直接引入就好啦，好的蹭沛，我們這樣寫：
import '@/common/sass/reset.sass'
然而臂寝，報錯了，具體的報錯信息現(xiàn)在沒辦法復(fù)盤了摊灭，大體是講找不到這個文件
左看右看咆贬，左看右看，這個文件路徑絲毫沒問題啊帚呼，怎么就報錯了呢掏缎？
網(wǎng)上搜了搜，終于發(fā)現(xiàn)了問題所在：
原來新版的vue-cli已經(jīng)幫我們配置好了sass煤杀，就在 build 目錄下的 utils.js 中眷蜈，大家將目光聚焦到第15行
export.cssLoaders這里，最后的return里有這樣兩個東西
sass:generateLoaders('sass', {indentedSyntax:true }),
scss:generateLoaders('sass'),
具體的不多解釋沈自，那么再回想一下我們在最開始的時候也配置了sass酌儒，兩者引起了webpack的沖突
好的，把剛剛那段刪掉枯途，應(yīng)該成功了＜稍酢！酪夷！
嗯榴啸！嗯？又報錯了晚岭，再看看報錯信息鸥印，大體是說mixin的變量啥的未定義之類的問題，
好吧坦报，我偷了個懶库说，把sass的function和mixin都放在了reset.sass里，沒有用燎竖，哭了，怎么辦要销？
四构回、sass-resources-loader
首先把reset.sass拆分，把變量、函數(shù)和mixin分別拆分出來形成三個文件：vars.sass纤掸、func.sass?和 mixin.sass
有個插件叫 sass-resources-loader 脐供，官網(wǎng)的介紹：
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.?
網(wǎng)上又搜了搜，發(fā)現(xiàn)sass-resources-loader的教程還挺多借跪，心中很開心政己，好，照著抄掏愁！
參考：http://www.reibang.com/p/5c3d457fbec9
tips：無意冒犯大佬歇由，可能是項目版本問題，又失敗了９邸Ｂ倜凇！
忍痛看官網(wǎng)的英文文檔：https://www.npmjs.com/package/sass-resources-loader
更新了還是咋回事兒辛掠？官網(wǎng)推薦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只能是字符串或字符串數(shù)組谢谦，
額，撓撓頭萝衩，不就是字符串么回挽，現(xiàn)在？
一行一行看報錯信息猩谊，想想千劈，好像webpack解析路徑不能直接這么寫，修改如下:
resources: path.resolve(__dirname, '../src/common/sass/mixin.sass')
PS：數(shù)組的話這樣寫：
resources: 【
? ? ??path.resolve(__dirname, '../src/common/sass/mixin.sass')预柒，
? ? ?// .....
】
好了队塘，一切成功！Ｒ搜臁憔古！
五、結(jié)語
作為前端新人淋袖，第一次寫技術(shù)博客鸿市，肯定有很多講的不到位或是不求甚解的地方，希望大佬們不吝賜教即碗，及時為我指出焰情，鳴謝！
但也希望這篇文章能夠幫助同學(xué)們成功爬坑剥懒，如果對您有所幫助内舟，請關(guān)注、點贊并收藏初橘，有其他問題也可以留言或私信验游，歡迎討論充岛！
