Vue Cli3.0 全局引入 less 变量
- 首先定义一个全局 less 样式文件，eg: global.less
// global.less
@head-height: 0.48rem; // 顶部head高度
@head-bg: #00bcd4; // 顶部head背景色
- 安装 style-resources-loader
vue add style-resources-loader
安装完成之后，命令行会让你选择预处理器，我们选择 less!
- 配置
上述安装完预处理器，会在项目的 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')]
}
}
}
网友评论