Vue中如何让所有组件共享全局less样式文件？

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

在Vue项目中，若想在组件中应用全局样式变量，而不在`main.js`中直接`import`，可以通过以下步骤实现：

1. 在`src`目录下创建一个`.less`文件，例如`variables.less`。

2.在`variables.less`文件中定义全局样式变量。

3.在`MHeader.vue`组件中引入`variables.less`文件。

例如：

less

// src/variables.less:root { --main-color: #3498db; --font-size: 14px; // ... 其他变量}

然后在`MHeader.vue`组件中引入：

vue

@import './variables.less';

// 使用变量h1 { color: var(--main-color); font-size: var(--font-size);}

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

目录结构如下：

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

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