Vue项目中引用公用文件的方法中引入全局在`main.js`中引入这个CSS文件

作者：网络发烧程序猿 | 发布时间：2025-07-09 |

Vue项目中引用公用CSS文件的方法

一、在`main.js`中引入全局CSS文件

在Vue项目的`main.js`文件中引入全局CSS文件，这样所有组件都能使用这些样式。具体步骤如下： 1. 在项目目录下创建一个`styles`文件夹，并在其中创建一个`global`文件夹。 2. 将你希望全局使用的CSS文件放入`global`文件夹中，比如叫`global.css`。 3. 在`main.js`中引入这个CSS文件。 ```javascript import './styles/global/global.css'; ``` 这样，`global.css`中的样式就会应用于整个Vue项目。

二、在单个组件中引入CSS文件

如果某个组件需要特定的样式，可以直接在组件的文件中引入CSS文件。 1. 在项目目录下创建一个`styles`文件夹，并在其中创建一个与组件同名的文件夹。 2. 将CSS文件放入对应的文件夹中。 3. 在组件文件中通过` ``` 3. 使用CSS预处理器：Vue支持使用CSS预处理器（如Sass、Less、Stylus）来编写样式，这样可以更加灵活地编写和管理样式。 ```javascript // main.js require('vue-style-loader!css-loader!sass-loader!./styles/yourstyle.scss'); ``` 通过以上几种方式，可以在Vue项目中引用公用的CSS样式，实现样式的复用和统一管理。