首页 > 其他 > 详细

Vue 项目在 style 标签内使用全局 less 变量

时间:2020-10-28 11:42:01      阅读:91      评论:0      收藏:0      [点我收藏+]

问题描述:

使用 Vue CLI 创建的项目,在 index.less 文件中定义了一个变量

技术分享图片

并在 main.js 中引入

技术分享图片

在组件中使用该变量的时候依然会报错

技术分享图片

技术分享图片

 

 

解决方案:

使用 style-resources-loader 提前加载定义全局变量的 less 文件

首先安装依赖包

npm install style-resources-loader vue-cli-plugin-style-resources-loader -D

然后在 vue.config.js 中添加以下配置:

// vue.config.js

const path = require(path);

module.exports = {
  // ...
  pluginOptions: {
    style-resources-loader: {
      preProcessor: less,
      // 引入需要全局加载的 less 文件
      patterns: [path.resolve(__dirname, ./src/styles/var.less)],
    },
  },
};

 

Vue 项目在 style 标签内使用全局 less 变量

原文:https://www.cnblogs.com/wisewrong/p/13889765.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!