1.使用场景
项目中需要统一配置前端的主题样式 我们可以使用less创建 @theme_colors: rgba(54, 174, 149, 1); 变量 供全局调用
2.安装依赖
- cnpm install less less-loader --save 安装less和less-loader
- cnpm i sass-resources-loader 要想全局使用还需使用一个插件( sass-resources-loader )
3.创建.less文件
建议在项目的src/assets目录下创建 less/theme.less 文件
//这是我当前theme.less文件中的全部内容
@theme_colors: rgba(54, 174, 149, 1);
4.配置theme.less文件全局使用路径
在build的utils.js下配置自己的公共变量路径 一般情况下是在generateLoaders()方法中
if (loader) {
if (loader == 'less') {
loaders.push({
loader: 'less-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
}, {
loader: 'sass-resources-loader',
options: {
// theme.less 自己的公共变量路径
resources: [path.resolve(__dirname, '../src/assets/css/theme.less')]
}
});
} else {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
}
5.配置完成后重启项目 引用全局属性
//使用方法: 【在行内样式中不生效】
background: @theme_colors;