有時(shí)我們項(xiàng)目的主題可能需要調(diào)整，如果每個(gè)頁(yè)面的css都要修改那就太麻煩了，我們可以定義一些變量方便更改整個(gè)項(xiàng)目的配色。

基于官方提供的腳手架vue-cli進(jìn)行搭建框架

等安裝完所有依賴后，安裝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

配置sass全局變量

有一個(gè)babel插件可以完美的解決這個(gè)問題：sass-resources-loader可以訪問sass資源任何一個(gè)需要訪問的sass模塊。所以，可以使用共享變量和混合所有SASS樣式，而不去每個(gè)文件都引用。

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

歐凱，到此為止，我們重新運(yùn)行項(xiàng)目

1563346882(1).jpg