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

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

在Vue项目中，若想在组件中使用全局样式文件中定义的变量，只需确保变量在`main.js`中正确`import`即可。例如，若你希望在`MHeader.vue`组件中使用`src`目录下的`less`文件夹中的`variables.less`文件，只需如下操作：

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

这样，`MHeader.vue`组件中就能直接使用`variables.less`中定义的变量了。

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

目录结构如下：

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

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