Question

项目使用导入main.scss文件的main.js。从那里，我将在各自的vue文件中为每个组件添加样式。

我想知道我是否可以在组件样式之后注入的全局样式表。 head中定位的样式类似于：main.scss -> component stylings -> overrides.scss。

这可能吗？

Answer 1

我不这么认为在bootstrap.js中导入scss文件是个好主意。您可以在main.scss中创建一个/src/scss/文件，并在该文件中放置一些内容：

@import '~bootstrap/scss/bootstrap';
@import 'global/bootstrap/your_component';

@import 'helpers/overrides';

并根据您的需要更改路径名称。

请确保通过添加以下内容在src/main.js导入您的文件：

import 'styles/main.scss';

此目录结构将能够以您想要的方式进行一些更新，并且易于阅读和理解文件的位置。

Answer 2

您可以声明CSS遵循特异性。 overrides.scss中的规则具有最高优先级，而main.scss中的规则具有较低优先级。 main.scss和组件中的规则可以具有相同的优先级，但组件中的规则稍后会声明，因此它将应用于元素。

中详细了解此行为