有時我們項目的主題可能需要調(diào)整垂谢，如果每個頁面的css都要修改那就太麻煩了，我們可以定義一些變量方便更改整個項目的配色疮茄。
基于官方提供的腳手架vue-cli進行搭建框架
等安裝完所有依賴后滥朱，安裝sass的依賴包：
cnpm i sass-loader --save-dev
//sass-loader依賴于node-sass
cnpm i node-sass --save-dev
在build文件夾下的webpack.base.conf.js的rules里面添加配置：
{
test:/\.scss$/,
loader:['style','css','sass']
}
在.vue文件中使用
<style scoped lang='scss'>
在static/css下建全局css變量文件，global.scss
global.jpg
然后在HelloWorld.vue使用定義的css變量
helloworld.jpg
運行npm run dev
發(fā)現(xiàn)報錯力试，等等徙邻，我們還有一步?jīng)]有完成
配置sass全局變量
有一個babel插件可以完美的解決這個問題：sass-resources-loader可以訪問sass資源任何一個需要訪問的sass模塊。所以畸裳，可以使用共享變量和混合所有SASS樣式缰犁，而不去每個文件都引用。
cnpm i sass-resources-loader --save-dev
修改config/index文件
在module.exports里面添加以下代碼
static: {
scss: '../static/css/global.scss'
},
修改build/utils文件
在exports.cssLoaders里面添加以下代碼
const resourecesSass = [];
if (config.static.scss) {
resourecesSass.push({
loader: 'sass-resources-loader',
options: {
resources: path.resolve(__dirname, config.static.scss)
}
})
}
sass-resource.jpg
修改下面的return代碼
return.jpg
歐凱怖糊，到此為止帅容，我們重新運行項目
1563346882(1).jpg
好了，我們的css變量已經(jīng)生效了
