Question

我想基于Bootstrap创建一个网站主题。我想扩展Bootstrap的默认组件并更改其中的一些组件。为此，我需要访问到Bootstrap定义的SASS变量，以便我可以覆盖它们。

我虽然从GitHub克隆Bootstrap并直接更改它，但我听说其实并不是很好的做法。你能给我一些建议吗？

Answer 1

以下是如何使用SASS覆盖/自定义Bootstrap 4 ...

您可以在自己的custom.scss文件中保留与Bootstrap SASS源文件分开的任何覆盖和自定义。这样，您所做的任何更改都不会影响Bootstrap源，这会使更改或升级Bootstrap更加容易。

1-考虑Bootstrap的SASS文件夹结构，以及custom.scss ...

|-- \bootstrap
|   |-- \scss
|   |   |-- \mixins
|   |   |-- \utilities
|   |   |-- bootstrap.scss
|   |   |-- variables.scss
|   |   |-- functions.scss
|   |   |-- ...more bootstrap scss files
|   custom.scss

2-在替换所需的custom.scss，import the Bootstrap files中。（通常，这只是 variables.scss 。在某些情况下，通过更复杂的切割，您可能还需要functions，{{1}和其他Bootstrap文件。）。进行更改，然后mixins。在更改后导入Bootstrap 非常重要...

@import "bootstrap"

2a（可选） - 此外，您可以在 /* custom.scss */ /* import the necessary Bootstrap files */ @import "bootstrap/functions"; @import "bootstrap/variables"; /* make changes to the !default Bootstrap variables */ $body-color: green; /* finally, import Bootstrap to set the changes! */ @import "bootstrap";之后扩展现有的Bootstrap类 以创建新的自定义类。例如，这是一个新的@import "bootstrap";类，它扩展（继承自）Bootstrap .row-dark类，然后添加背景颜色。

.row

3-编译SASS（node-sass，gulp-sass，webpack / NPM等）。 CSS输出将包含覆盖！如果@imports失败，请不要忘记检查includePaths。有关您可以覆盖的完整变量列表，请参阅variables.scss文件。还有这些global variables。

Bootstrap SASS Demo on Codeply

总之，以下是它的工作原理：

1_首先，当使用SASS处理/* optionally create new custom classes from existing classes */ .row-dark { @extend .row; background-color: #333333; color: #ffffff; }文件时，在custom.scss中定义了！默认值。

2_接下来，设置我们的自定义值，它将覆盖在bootstrap/variables.scss中设置了！默认值的任何变量。

3_最后，导入Bootstrap（bootstrap/variables.scss），使SASS处理器（A.K.A.编译器）能够使用Bootstrap默认值和自定义覆盖生成所有适当的CSS。

对于那些不了解SASS的人，请尝试我所做的tool。

另见：
How to get 15 columns in Bootstrap 4 in SASS CSS?
Bootstrap v4 grid sizes / Sass List
Customizing Bootstrap CSS template
Extending Bootstrap 4 and SASS

Answer 2

自从基础本身不断更新以来，Github版本的Bootstrap总是会发生变化。更不用说，Bootstrap的结构方式，它不一定编译你的SASS编译器将导出的方式。最佳实践是以最适合您的方式构建它。

以下是我通常构建整个项目的方式

/style/
/style/theme.scss
/style/theme.min.css
/style/bootstrap.scss
/style/bootstrap.min.css
/style/bootstrap/{subfiles}
/style/bootstrap/mixins/{subfiles}
/style/bootstrap/utilities/{subfiles}

/scripts/
/scripts/bootstrap.min.js
/scripts/main.min.js
/scripts/bootstrap/

这假设你有sass和js minifier。

Answer 3

我将从头开始解释：下载Ruby，因为sass是用Ruby编写的。打开“使用Ruby启动命令提示符”，然后输入以下内容：

gem install sass

如果您确实通过软件包管理器安装了引导程序；将此代码写入main.scss

@import "../node_modules/bootstrap/scss/bootstrap";

然后导航到您的工作目录，其中保存了main.scss或main.css文件。在命令行中输入以下代码：

sass main.scss main.css

这会将sass初始化为CSS。

如果您确实下载了引导程序源文件，请在源文件夹中找到“ scss”文件夹

BOOTSTRAP\bootstrap-4.2.1\bootstrap-4.2.1\scss

并将其复制到项目中的样式文件夹中，在其中保留所有样式文件：css，scss，bootstrap，然后将“ bootstrap.scss”文件导入main.scss

@import "./scss/bootstrap.scss";

现在通过输入以下代码初始化编译：

sass main.scss main.css

最后，您可以输入：

sass --watch main.scss:main.css //this should be running

观看main.css中的所有更改不要忘记：您将CSS代码写入main.scss，sass将其编译为main.css，并在html中链接main.css文件。

如果您使用的是Visual Studio代码，则可以安装“ Live Sass Compiler”扩展，在下面的安装中，您将看到“ Watch Sass”按钮。在style文件夹中创建main.scss文件，然后按照我上面的说明导入文件后，单击“ watch Sass”按钮，它将开始编译。

如果您想在React.js项目中使用Sass。请按照上述所有步骤操作，只需删除“ src”文件夹中的app.css文件

Answer 4

我花了一些时间来整理一个适当的教程，以安装并使用带有自制软件的sass来编辑node / express项目中的bootstrap 4。

使用自制软件安装sass

brew install sass/sass/sass

在项目中安装引导程序

npm install bootstrap --save

更改为资产目录，创建sass目录，创建应用程序和自定义文件

cd public/assets/css && mkdir sass && touch sass/app.scss sass/custom.scss

在app.scss中添加以下内容

// import bootstrap files
@import "../../../../node_modules/bootstrap/scss/functions";
// import bootstrap defaults
@import "../../../../node_modules/bootstrap/scss/variables";
// import customization
@import "custom.scss";
// finally, import Bootstrap to set the changes!
@import "../../../../node_modules/bootstrap/scss/bootstrap";

在custom.scss中添加示例自定义

$hotness: #fb3f7c;
$link-color: $hotness;

放荡自动导出/更新.css文件

sass --watch sass/app.scss sass/bootstrap.css

链接到HTML中的新引导文件

参考

如何使用SASS扩展/修改（自定义）Bootstrap 4

4 个答案: