通过配置全局样式文件·想要让样式在所有组件中都生效·这样你就不需要在每个组件里手动引入样式文件了
一、通过配置全局样式文件
在Vue项目中，想要让样式在所有组件中都生效，就像穿件统一的“外套”一样简单。具体步骤如下： 1. 创建公共SCSS文件：先来件“外套”，在项目里创建一个公共的SCSS文件，比如叫 `common.scss`。 2. 编写公共样式：在这个文件里，写上你需要共享的样式代码。 3. 引入全局样式文件：然后在项目的入口文件中引入这个SCSS文件。二、使用SCSS模块
SCSS模块就像给每个组件穿上不同的“定制装”，避免样式冲突。操作步骤如下： 1. 创建公共SCSS文件：同样先来件“定制装”，创建一个公共的SCSS文件。 2. 引入SCSS模块：在需要这个样式的组件里，引入这个SCSS模块。这样，每个组件就能拥有属于自己的独特“装扮”，而且不会相互影响。
三、在组件中引入公共样式
你也可以选择给每个组件单独穿“外套”，确保它们都有统一的风格。步骤如下： 1. 创建公共SCSS文件：和前面一样，创建一个公共的SCSS文件。 2. 在组件中引入SCSS文件：在每个需要这些样式的组件里，引入这个公共的SCSS文件。这种方法就像给每个组件穿上不同的“外套”，但每个“外套”都是相同的。
四、配置Webpack自动引入公共样式
为了让事情更简单，你可以让Webpack帮你自动处理公共样式的引入。步骤如下： 1. 创建配置文件：在项目根目录创建一个配置文件（如果还没有的话）。 2. 配置Webpack：设置配置文件，让Webpack自动引入公共样式文件。这样，你就不需要在每个组件里手动引入样式文件了。
五、使用第三方库的公共样式
如果你使用的是像Vuetify或Element-UI这样的第三方UI库，它们通常会提供一些公共样式。你只需要在项目中引入这些库的样式文件即可。就像直接穿上现成的“套装”，既方便又好看。
| 方法 | 优点 | 缺点 |
|---|---|---|
| 配置全局样式文件 | 样式统一 | 灵活性较差 |
| 使用SCSS模块 | 局部化样式，避免冲突 | 需要额外配置 |
| 在组件中引入公共样式 | 每个组件独立 | 可能需要重复代码 |
| 配置Webpack自动引入 | 自动化，方便 | 需要配置Webpack |
| 使用第三方库的公共样式 | 方便快捷 | 可能有限制 |