我想基于Bootstrap创建一个网站主题。我想扩展Bootstrap的默认组件并更改其中的一些组件。为此,我需要访问到Bootstrap定义的SASS变量,以便我可以覆盖它们。
我虽然从GitHub克隆Bootstrap并直接更改它,但我听说其实并不是很好的做法。你能给我一些建议吗?
答案 0 :(得分:22)
以下是如何使用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
答案 1 :(得分:1)
自从基础本身不断更新以来,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。
答案 2 :(得分:1)
我将从头开始解释:下载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文件
答案 3 :(得分:0)
我花了一些时间来整理一个适当的教程,以安装并使用带有自制软件的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中的新引导文件
参考