vue 之使用 scss 的全局變量

寫在前面

若是在每個.vue文件都引入import scss文件，仍是比較麻煩的，可是main.js能夠直接import css文件，而不能夠直接import scss文件； 因此直接全局搞定，無需任何地方引入 步驟以下：

1.安裝node-sass、sass-loader、style-loader、sass-resources-loader

npm install xxx --save
複製代碼

2. 修改配置文件

vue-cli 2x用法

//修改build中的utils.js
//將：
scss: generateLoaders('sass'),
//改成：
scss: generateLoaders('sass').concat(//使用scss的全局變量

{

loader: 'sass-resources-loader',

options: {

resources: path.resolve(__dirname, '../src/common/resource.scss') //這個是放置scss文件的路徑

}

}

)

複製代碼

vue-cli 3.0用法

//增長vue.config.js文件配置css
 css: {
    loaderOptions: {
        sass: {
          // @/ is an alias to src/
          // so this assumes you have a file named `src/variables.scss`
          data: `@import "@/scss/resource.scss";`
        }
    }
},
複製代碼

舉例子啦！！

//resource.scss
$white:#fff;
//a.vue
<style scoped  lang="scss">
body{
color: $white;
}
</style>
複製代碼

【注】：

一、上面引入的文件只需引入一個全局（resource.scss）的，其餘文件能夠在resource.scss中引入 二、.vue文件中的style標籤中必須添加lang="scss"，這樣scss文件中的變量引入進來纔是正確滴打開方式