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

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

在Vue项目中，若要在组件中应用全局样式变量，但只在`main.js`中`import`是不够的，可以按照以下步骤操作：

1. 在`src`目录下创建一个名为`variables.less`的文件。

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

3.在`main.js`中引入`variables.less`。

4.在`MHeader.vue`组件中直接使用这些变量。

示例代码如下：

less

// src/variables.less@primary-color: #409EFF;@font-size: 14px;

// src/main.jsimport './variables.less';

// MHeader.vue Header Content

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

目录结构如下：

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

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