vue 全局定义变量

vue-cli2

1. 安装node-sass、sass-loader、style-loader:

npm install node-sass sass-loader --save-dev
npm install style-loader --save-dev   

2、安装sass-resources-loader：

cnpm install sass-resources-loader --save-dev

3、修改build中utils.js文件下的一段代码：
修改前：

image.png

将scss: generateLoaders('sass')修改成如下代码：

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/css/_handle.scss'),
    }
  }
),

4.记得要重启一下项目，项目重启之后就可以在任意地方使用_handle.scss中定义好的样式变量了。

vue-cli3

编辑vue.config.js文件。如下：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/css/_handle.scss";`
      }
    }
  }
}

记得要重启一下项目，项目重启之后就可以在任意地方使用_handle.scss中定义好的样式变量了。