我应该在哪个.scss文件上进行网站更新？

Question

正如你可以通过这个问题告诉我我还在学习SASS和Bootstrap 4.使用BS4我必须设置一些.scss部分文件，然后将它们导入我的site.scss文件。为了对Bootstrap进行更改，我在_my-theme.scss文件中进行了更改。我的问题是，当我想进行简单的CSS更改，而不是处理BS时，最好将它们直接放在site.scsss文件中，还是应该将它们放在_my-theme文件中？

例如：如果我只是想创建一个页面标题类，我会看到如果我将它放在我的site.scss文件或_my-theme.scss文件中但是哪个是最佳实践并且是有原因吗？

我知道我只需要将该课程放在一个或另一个文件中，我只是不知道应该把它放在哪一个？

这是我的site.scss：

@import "scss/_custom-variables.scss";
@import "bootstrap/bootstrap.scss";
@import "scss/_my-theme.scss";


.page-title {
    color: red;
    font-weight: bold;
}

以下是_my-theme.scss：

的示例

body {
    padding-top: 0px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

.page-title {
    color: red;
    font-weight: bold;
}

Answer 1

我也在学习，但根据我的经验，你应该用容器包装而不是使用css填充。

当你@import填入sass时，你应该避免编写文件扩展名（不需要.scss）和部分下划线。

Answer 2

在我的项目SCSS文件夹中，我将 bootstrap 放在一个我永远不会接触更改的单独文件夹中，因为如果Bootstrap更新我也可以安全地更新。 核心文件夹来自我的主题，如果我在那里更改它只是出于主题目的，认为我可以在另一个项目中使用此文件夹，所以它必须非常通用。在项目文件夹中，我放置了自定义类，覆盖了核心或 bootstrap 样式，项目颜色，项目混合。然后我有供应商文件夹，这些文件夹专门来自第三方库，也从不涉及，只是为了咨询，如果我必须覆盖我将在项目文件夹中这样做。< / p>

我的项目/ project.scss内容：

// Custom styles
@import "custom";

// Mixins
@import "mixins";

// New colors
@import "colors";

// New styles
@import "override";

我的项目/ _colors.scss内容：

// Colors
.default-grey {
    color: #333;
    background-color: #f5f5f5;
    border-color: #ddd;
}

然后main.scss导入所有内容：

// Variables
@import "variables";

// Import Bootstrap source files
@import "bootstrap/bootstrap";

// Import core styles
@import "core/core";

// Import vendors styles
@import "vendors/vendors";

// Import project scss files
@import "project/project";