vue-cli4中使用less全局变量（4步）

134 阅读 0 评论 89 点赞

我是靠谱客的博主美好龙猫，这篇文章主要介绍vue-cli4中使用less全局变量（4步），现在分享给大家，希望可以做个参考。

（1）先下载less：npm i less-loader less --save-dev

（2）再下载：npm i style-resources-loader --save-dev

（3）在vue.config.js文件中配置：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
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

复制代码

1
2
3
4
// base.less文件中声明变量：
@bg:#f00; // 按钮主题色
@bg2:blue;
@font-family:PingFangSC;

复制代码

1
2
3
4
5
6
// 在.vue文件中使用：
<style lang='less' scoped>
   .p{
       color:@bg; //声明的less样式变量
   }
</style>

参照：https://blog.csdn.net/wly_er/article/details/102676486?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task