Vue Cli3.0 全局引入 less 变量

Vue Cli3.0 全局引入 less 变量

1. 首先定义一个全局 less 样式文件，eg: global.less

// global.less
@head-height: 0.48rem; // 顶部head高度
@head-bg: #00bcd4; // 顶部head背景色

2. 安装 style-resources-loader

vue add style-resources-loader

安装完成之后，命令行会让你选择预处理器，我们选择 less!

3. 配置
   上述安装完预处理器，会在项目的 vue.config.js 里面生成一段代码，我们只需要将 less 文件路径放入其中

// vue.config.js
const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [path.resolve(__dirname, 'src/assets/css/global.less')]
    }
  }
}

自动化导入