vue-cli2.0全局使用sass變量

在安裝 sass-resources-loader之前先安裝

npm i @babel/core -D

1. 安裝插件

npm i sass-resources-loader

 

1、如果單純在main.js中引入global.scss全局樣式，不使用全局變量和方法等

找到 webpack.base.conf.js刪掉下面的配置就可以了

{
    test: /\.scss$/,
    loaders: ["style", "css", "sass"]
}

使用：main.js引入scss文件    import './assets/style/global.scss'即可。

2、如果既要引入全局css（scss）樣式，又要用到全局變量或者方法，那么就要在步驟1的基礎上安裝sass-resources-loader插件，然后新建一個var.scss(自己命名)文件專門存放變量或者方法等，例如var.scss：

@charset "UTF-8";

$themeColor: #409eff;

@mixin ellipsis() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

 

然后找到 build/utils.js，將 scss: generateLoaders('sass')，修改為如下：

scss: generateLoaders('sass')
    .concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/var.scss') //這里是單獨建的存放變量的scss，我的是 var.scss
        }
      }
    ), 

使用： main.js  引入   import './assets/style/global.scss'；  然后在.vue文件中，可以直接使用 $themeColor 變量 和 ellipsis  公用樣式了。

比如任意一個xxx.vue中可以這樣用到

 

2.配置需要引入的 scss文件

修改vue-cli的build/utils.js，找到scss的加載設置：

改為如下   注（文件路徑可根據實際情況調整，別寫錯了）

 

 

這是我的全局scss文件位置，如下

 

 

 

3.使用全局變量