vue-cli4中使用less全局变量(4步)
(1)先下载less:npm i less-loader less --save-dev(2)再下载:npm istyle-resources-loader --save-dev(3)在vue.config.js文件中配置:const path = require('path')function resolve (dir) {return path.join(__dir...
·
(1)先下载less:npm i less-loader less --save-dev
(2)再下载:npm i style-resources-loader --save-dev
(3)在vue.config.js文件中配置:
const path = require('path')
function resolve (dir) {
return path.join(__dirname, dir)
}
module.exports = {
pluginOptions: { // 第三方插件配置
'style-resources-loader': {
preProcessor: 'less',
patterns: [path.resolve(__dirname, './src/assets/css/base.less')] // less所在文件路径
}
}
}
(4)在.less文件中编写变量,在.vue文件中使用该变量即可!
--注意:如果此时仍报错@bg变量没有声明,需再安装:npm i vue-cli-plugin-style-resources-loader --save-dev
// base.less文件中声明变量:
@bg:#f00; // 按钮主题色
@bg2:blue;
@font-family:PingFangSC;
// 在.vue文件中使用:
<style lang='less' scoped>
.p{
color:@bg; //声明的less样式变量
}
</style>
更多推荐
已为社区贡献16条内容
所有评论(0)