首先准备一个存放许多经常用到的less变量文件
variables.less
//公共变量
// 主题
@xtxColor:#27BA9B;
// 辅助
@helpColor:#E26237;
// 成功
@sucColor:#1DC779;
// 警告
@warnColor:#FFB302;
// 价格
@priceColor:#CF4444;
安装插件
vue add style-resources-loader
然后会生成一个vue.config.js的文件,这里的patterns需要自己配置全局less文件的路径
const path = require('path');
module.exports = {
pluginOptions: {
'style-resources-loader': {
preProcessor: 'less',
patterns: [
path.join(__dirname, './src/assets/styles/variables.less'),
path.join(__dirname, './src/assets/styles/mixins.less'),
]
}
}
}
配置完成后,重新启动项目,然后在组件中测试,此时就可以不用导入外部CSS样式了,因为全局less变量生效了
<style lang="less" scoped>
div{
.hoverShadow();
color:@xtxColor;
}
</style>