一、安裝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)該成功了！?。?/p>
嗯！嗯？又報錯了，再看看報錯信息，大體是說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.itdecent.cn/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')，
? ? ?// .....
】
好了，一切成功?。。?/p>
五、結(jié)語
作為前端新人，第一次寫技術(shù)博客，肯定有很多講的不到位或是不求甚解的地方，希望大佬們不吝賜教，及時為我指出，鳴謝！
但也希望這篇文章能夠幫助同學(xué)們成功爬坑，如果對您有所幫助，請關(guān)注、點贊并收藏，有其他問題也可以留言或私信，歡迎討論！
