Vue中使用Sass全局變量

前言

假設我們原有項目的主題色是藍色的，這時有個需求，需要把主題色改成橙色的。一般情況下，我們可能會在main.js中引入公共樣式文件，但你會發現，在組件中使用公共樣式文件中定義的某個參數時，會報一個錯誤："變量未定義"。

那還有一種寫法是，在每個組件中都引入公共樣式(注：需要用到公共樣式的組件)，但這樣寫，感覺代碼會很不perfect 。

那有沒有什么辦法，只要公共樣式引入一次，即可在全部組件中使用呢？

 

方法一：使用sass-resources-loader解決Sass全局變量問題

sass-resources-loader可以訪問sass資源任何一個需要訪問的sass模塊。所以，可以使用共享變量和混合所有SASS樣式，而不去每個文件都引用。

 

1.安裝sass-resources-loader

npm install sass-resources-loader --save-dev

 

2.相關配置

在build文件夾下，找到util.js文件，然后配置相關代碼。首先新增兩個函數：

//簡化路徑
  function resolveResource(name){
    return path.resolve(__dirname,'../static/css/'+name)
  }

  function generateSassResourceLoader(){
    var loaders = [
      cssLoader,
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          // 多個文件時用數組的形式傳入，單個文件時可以直接使用 path.resolve(__dirname, '../src/init.scss'
          resources: [resolveResource('init.scss')]  
        }
      }
    ]
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

然后在util.js文件中找到下面的代碼，把“generateSassResourceLoader”方法替換到sass和scss屬性中，代碼如下(注釋掉那一句是默認代碼)：

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    // sass: generateLoaders('sass', { indentedSyntax: true }),
    sass:generateSassResourceLoader(),//引用上面的配置方法
    scss: generateSassResourceLoader(),//引用上面的配置方法
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

配置完后，重新啟動一下項目，就可以在其它組件中使用全局變量了。

 

方法二：使用vue-cli 3

在vue.config.js文件中配置css.loaderOptions 選項，這邊就直接貼官網上的代碼了，官網地址：灰機直達

 

引入多個的話，在data屬性中，分號后面直接添加即可。

sass: {
        // @/ 是 src/ 的別名
        // 所以這里假設你有 `src/variables.scss` 這個文件
        data: `
                 @import "~@/variables.scss";
                 @import "~@/test.scss";
              `
}

 

方法三：直接在App.vue中引入公共樣式文件，但不能添加scoped

 

參考地址：

https://blog.csdn.net/qq_27868533/article/details/79651659

https://www.jianshu.com/p/a0a19ae0c737