我应该把 custom.scss 文件放在哪里来自定义 bootstrap 组件？

Question

我想用 scss 自定义我的 bootstrap，所以我知道我必须制作 custom.scss 并将一些 scss 代码放入其中 - 但它不起作用，因为我不知道我可以把这些文件放在哪里。下图来自 bootstrap 的官方网站 - 但它不起作用我也这样做了——还有一些我在互联网上喜欢的结构

Answer 1

它不会计量你的文件在哪里。重点是在来自 bootstrap.

的变量之前包含您的自定义变量

您可以创建 BS 文件，您可以在其中包含 BS 组件和其他元素，并且在此文件中您可以覆盖默认变量。

此外，在这种情况下，您可以优化目标 CSS 文件。

还有一件事 - 例如我使用 BS5，在 v4 中方法相同（因为它是 SCSS）。

你的结构：

.
└── scss/
    ├── _bs-variables.scss
    ├── custom-bootstrap.scss
    └── custom.scss

示例：

_bs-variables.scss:

$primary:       tomato;

custom-bootstrap.scss:

/*!
 * Bootstrap v5.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

// scss-docs-start import-stack
// Configuration
@import "~bootstrap/scss/functions";

// override default variables
@import "./bs-variables"; // here is your custom variables include
// default BS variables
@import "~bootstrap/scss/variables";

@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

// Layout & components
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
...

custom.scss:

@import './custom-bootstrap';

// other SCSS code
...

我应该把 custom.scss 文件放在哪里来自定义 bootstrap 组件？

where shall I put custom.scss file to customize bootstrap component?

sass

bootstrap-4

scss-lint