vue项目定义全局变量--颜色变量

1、建立一个vue项目,并且该项目使用scss语法

2、定义一个scss文件,里面定义一个全局的变量

vue项目定义全局变量--颜色变量

3、在build下的utils.js中配置scss: generateLoaders('sass'),把css: generateLoaders('sass'),修改为

scss: generateLoaders('sass')

.concat(

{

  loader: 'sass-resources-loader',

  options: {

    resources: path.resolve(__dirname, 'scss文件的路径') //这里是单独建的存放变量的scss,我的是 var.scss

      }

 }),

vue项目定义全局变量--颜色变量

4、在app.vue中引用,

<style lang="scss">

@import './style/_style.scss';

</style>

vue项目定义全局变量--颜色变量

5、在其他页面引用

color:$base-color,$base-color就是自己定义的全局变量