在寫vue的css樣式時(shí)，覺得需要css預(yù)處理器讓自己的css更加簡潔顾孽、適應(yīng)性更強(qiáng)祝钢、可讀性更佳，更易于代碼的維護(hù)若厚，于是在vue-cli腳手架采用scss拦英。寫過的人都知道，每寫一個(gè).vue文件都要在style上面@import global.scss文件的話测秸，這樣很麻煩疤估。css文件可以在main.js中可以直接import，而scss文件import會報(bào)錯(cuò)霎冯，因此記錄下處理的方法铃拇。
步驟一： 安裝node-sass、sass-loader沈撞、style-loader
cnpminstallnode-sass--save-devcnpminstallsass-loader--save-devcnpminstallstyle-loader--save-dev? ?
步驟二： 安裝sass-resources-loader
cnpminstallsass-resources-loader--save-dev
步驟三： 修改build中的utils.js
scss:generateLoaders('sass')? ? 修改成:
? ? scss: generateLoaders('sass').concat(
? ? ? {
? ? ? ? loader: 'sass-resources-loader',
? ? ? ? options: {
? ? ? ? ? resources: path.resolve(__dirname, '../src/assets/global.scss')
? ? ? ? }
? ? ? }
? ? )
可知慷荔，我是在assets中創(chuàng)建了一個(gè)global.scss文件。
最后缠俺，在組件中的style標(biāo)簽添加lang="scss"显晶，就OK了。
附上scss基礎(chǔ)教程:?https://www.sass.hk/guide/
