vue-cli2配置scss遇到的各種坑

在項目中使用了scss，然而配置的時候，卻遇到各種百度都很難搜索出來的問題。

首先是新建了一個公共的common.scss文件，里面用來存放公共樣式，例如$blue:#4675b8;這個$blue就是scss的一個變量，無論在單獨的scss文件里面或者vue文件里面的<style>都可以直接引用

再新建一個index.scss，在里面引入@import './common.scss';就可以使用公共樣式的變量，路徑需要自己修改

安裝scss依賴，百度基本上是以下這個流程

//在項目下，運行下列命令行
npm install --save-dev sass-loader

//因為sass-loader依賴於node-sass，所以還要安裝node-sass
npm install --save-dev node-sass

然后npm run dev重啟下項目

然而這樣的話還是不行的，會報各種錯誤
如果遇到

Invalid CSS after "...load the styles": expected 1 selector or at-rule, was "var content = requi" in F:.....

這樣的，因為安裝scss的時候，會自動生成

{ test: /\.scss$/, use: ['styl', 'css', 'sass'], }

你要在webpack.base.conf.js里面先注釋掉

【
　　另外一個方法是保留這個，然后把

   webpack.base.conf.js里面的
   sass: generateLoaders('sass', { indentedSyntax: true }),
 scss: generateLoaders('sass'),
　　注釋掉
　　其實就是loader重復，保留一個就好

】

然后在utils里面重新配置公共的common.scss，按照以下鏈接來 https://blog.csdn.net/qq_27868533/article/details/79651659?tdsourcetag=s_pctim_aiomsg 
在main.js里面引入import './styles/common.scss' 作為全局引用，路徑還是要自己修改
這樣的話在單獨的scss文件里面或者vue文件里面的<style>都可以使用common.scss的$blue了

有些問題弄着弄着就好了，也忘了還有什么問題，下次遇到再繼續記錄吧
相關的資料的太少，如果有什么問題也可以丟上來，看我是否遇到過，能給予幫助~