首先，學(xué)會(huì)使用sass：
1.先下載和安裝node-sass和一些加載器
$ cnpm install sass-loader node-sass vue-style-loader --D
2.配置webpake加載器:webpack.base.config.js //從這一段上面是默認(rèn)的！不用改眉孩！下面是沒有的需要你手動(dòng)添加上渴，相當(dāng)于是編譯識(shí)別sass!
{ test: /\.scss$/, loaders: ["style", "css", "sass"] }
3.在需要用到sass的地方添加lang=scss
<style lang="scss" scoped> 蝉稳。破婆。啄巧。寻歧。。秩仆。码泛。 <style>
以上是獨(dú)立裝sass的過程，一般項(xiàng)目在構(gòu)建的時(shí)候會(huì)在package.json里面提前引入了node-sass和加載器澄耍，webpack也默認(rèn)配置了加載器噪珊，具體參考項(xiàng)目里面的配置晌缘。
sass和scss
注意：sass和scss是兩個(gè)不同的東西！只是相似痢站！sass借鑒了ruby語言的規(guī)范很嚴(yán)格磷箕！代碼里面也沒有大括號(hào)！這對(duì)于習(xí)慣用css{}的前端人員很難適應(yīng)阵难！于是就出現(xiàn)了scss!完美兼容css!還能有sass的功能岳枷！ 如果用的是webpack-simple模版用sass的話就是lang="sass",sass是沒有{}括號(hào)的，如果有{}會(huì)抱錯(cuò)呜叫。 webpack模版的話就是用lang="scss"
以下是關(guān)于sass的引入和使用嫩舟，下面討論一些關(guān)于sass在項(xiàng)目里面如何結(jié)構(gòu)化，和模塊化的使用：
1：分散式（參考大部分的后臺(tái)系統(tǒng)） 分散式是vue官網(wǎng)推薦的一種方式怀偷，就是每個(gè)模塊是一個(gè)獨(dú)立的.vue文件，里面包含template模版播玖，js椎工，css，這三種都用標(biāo)簽封裝起來蜀踏，成為一個(gè)vue實(shí)例维蒙，實(shí)例解析的時(shí)候逐步解析每個(gè)標(biāo)簽的內(nèi)容，所以這個(gè)vue文件里面的sass是局部的果覆，只有這個(gè)實(shí)例界面生效颅痊，一般在標(biāo)簽上面加scoped來局部化，去掉scoped就會(huì)變成全局樣式局待。
【好處：】每個(gè)vue界面樣式獨(dú)立開發(fā)斑响，互不影響，定位問題和改界面樣式的話都比較方便钳榨，好找
【弊端：】界面被scoped局部化之后舰罚，不能覆蓋界面里面的子組件樣式，因?yàn)闃邮街粚?duì)當(dāng)前界面生效薛耻。（可以加/deep/解決）
【公共樣式和變量：】公共樣式和公共變量一般定義在外面营罢，每個(gè)界面要用的時(shí)候都需要引入（import）
2：集中式（參考大部分的前臺(tái)系統(tǒng)） 集中就是把所有模塊的樣式都抽離出來做獨(dú)立的.scss文件，每個(gè)模塊里面不寫scss標(biāo)簽饼齿，寫一個(gè)公共的scss文件(app.scss)把所有模塊的樣式按照順序都引入一遍（先引公共變量饲漾，在引公共樣式，最后引入每個(gè)模塊）缕溉，最后在app.vue里面或者main.js主入口里面import app.scss考传。最后界面就一個(gè)style標(biāo)簽
【好處：】所有樣式集中管理，樣式之間可以互相覆蓋倒淫，可以隨意覆蓋子組件樣式伙菊，公共變量和公共樣式可以隨意使用败玉。
【弊端：】所有模塊都需要獨(dú)立的樣式文件，導(dǎo)致樣式文件過多不好管理镜硕，互相覆蓋容易產(chǎn)生bug（為了不互相覆蓋运翼，每個(gè)樣式都需要寫在 父樣式的嵌套里面，引入的時(shí)候也需要注意順序）兴枯，
【公共樣式和變量：】公共樣式和公共屬性會(huì)在引入根樣式文件（app.scss）里面第一個(gè)引入血淌，這樣后面引入的樣式就可以隨意使用。
關(guān)于sass里面怎么定義全局的變量上述的公共樣式就是一個(gè)解決方案财剖，不過看到一些其他解決方案悠夯，也可以參考下：https://www.imooc.com/article/28195
