Vue全局Less样式，组件引用全局样式文件，如何实现？

本文共计557个文字，预计阅读时间需要3分钟。

在Vue项目中，若想在组件中使用全局样式变量，只需在`main.js`中正确导入变量文件即可。以下是一个简化的步骤和示例：

1. 在`src`目录下创建`less`文件夹，并在其中创建`variables.less`文件，定义全局变量：less// src/less/variables.less:root { --main-color: #3498db; --font-size: 14px;}

2. 在`main.js`中导入并使用这些变量：javascript// main.jsimport './less/variables.less';

// 使用变量const mainColor=document.documentElement.style.getPropertyValue('--main-color');console.log(mainColor); // 输出：#3498db

3. 在组件中应用这些变量（以`MHeader.vue`为例）：vue Hello, Vue!

@import './variables.less';

当你想要在vue项目的一个组件中使用全局样式文件中定义好的变量，此时只在main.js中import是不行的。

目录结构如下：

即在MHeader.vue中想要使用src下的less下的variables.less文件中定义好的变量。

此时，只用import在main.js中导入variables.less文件是会报错的。