在web项目的开发中less的使用比较的多
那么怎么定义less的全局属性
例如:
同文件中
/* style/config.less */
@themeColor: #f37b1d;
/* 同文件中 */
.item.active {
color: @themeColor;
border-color: @themeColor;
}
非同文件中
/* 某个不知名的的vue文件 */
.item.active {
color: @themeColor;
border-color: @themeColor;
}
正常来说会报错
如何解决
// 配置 全局 less 加载前的变量 先下载依赖
// npm i sass-resources-loader -s
// vue.config.js
module.exports = {
publicPath: "./",
outputDir: 'dist',
/* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
assetsDir: "static",
chainWebpack: (config) => {
// 配置 @ 路径
config.resolve.alias
.set('@', resolve('src'))
// 配置 全局 less 加载前的变量
// npm i sass-resources-loader -s
const oneOfsMap = config.module.rule('less').oneOfs.store
oneOfsMap.forEach(item => {
item
.use('sass-resources-loader')
.loader('sass-resources-loader')
.options({
// Provide path to the file with resources
resources: resolve('src') + '/style/config.less',
// Or array of paths
// resources: ['./path/to/vars.scss', './path/to/mixins.scss', './path/to/functions.scss']
})
.end()
})
},
}
最后
我还想补充点什么的来着