vue項(xiàng)目安裝scss
新建vue 項(xiàng)目 vue init webpack myname
1衩侥、cnpm install sass-loader --save，
2矛物，cnpm install node-sass --sava茫死，
3、根目錄下找到????build 文件下的 webpack/base/conf.js履羞，找到 rules數(shù)組添加如下對(duì)象：
rules:?[
{
????????test:?/\.scss$/,
????????loaders:?['style',?'css',?'sass']
??????},
4峦萎，在組件中style標(biāo)簽上添加屬性 lang="scss"屡久，保存運(yùn)行。
5爱榔、如果報(bào)錯(cuò)：Module build failed: TypeError: this.getResolve is not a function被环，
? ? 版本太高導(dǎo)致的，找到根目錄下的package.json 里面的sass-loader配置详幽，安裝的時(shí)候是8.0.2筛欢，將版本號(hào)改為7.3.1，運(yùn)行還報(bào)錯(cuò)就從新安裝依賴唇聘，npm install版姑，再次運(yùn)行就可以了。
設(shè)置scss變量
1迟郎、安裝 cnpm install sass-resources-loader --save
2剥险、在src目錄下的assets文件夾里面新建一個(gè)public.scss文件，用于存放所有的公共變量宪肖。
3表制，根目錄下找到???build下的utils.js里面的scss:?generateLoaders('sass')
改為：（其實(shí)就是在后面加concat的內(nèi)容）
scss: generateLoaders('sass').concat(
? ? ? {
loader:'sass-resources-loader',
? ? ? ? options: {
resources: path.resolve(__dirname,'../src/assets/public.scss')
? ? ? ? }
? ? ? }
? ? )
4、如若已經(jīng)運(yùn)行了項(xiàng)目匈庭，重新npm run dev ,組件中就可以使用全局變量了夫凸。
使用全局變量
1、在全局變量文件里面寫入變量（$）阱持，混合（@mixin，括號(hào)里面為默認(rèn)值魔熏，可有可無）衷咽，繼承（%）等語法。關(guān)鍵詞：
2蒜绽、在組建中使用變量（$+變量名）镶骗，混合（@include），繼承（@extend）躲雅。
ps：文章內(nèi)容是綜合網(wǎng)上的文章以及自己實(shí)踐后的記錄鼎姊，如有侵權(quán)，請(qǐng)聯(lián)系刪除相赁。
