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

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缩小器。

I will explain from scratch: Download Ruby because sass is written in Ruby. Open the “start command prompt with Ruby” and enter this:

gem install sass

In macos, ruby is already installed. so in terminal:

sudo gem install sass

If you did install bootstrap through package manager; write this code into main.scss

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

then navigate to your work directory where you keep your main.scss or main.css files. Enter this code into command line:

sass main.scss main.css

this will initialize compiling sass to css.

If you did download bootstrap source files, find the “scss” folder in your source folder

BOOTSTRAP\bootstrap-4.2.1\bootstrap-4.2.1\scss

and copy it into your style folder in your project where u keep all styling files:css,scss,bootstrap then import “bootstrap.scss” file into main.scss

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

And now initialize compiling by entering this code:

sass main.scss main.css

Finally, you can type:

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

to watch all changes in main.css DONT FORGET: You will write your css codes into main.scss, sass will compile it to main.css and you will LINK main.css file in your html.

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

现在在bootstrap文件夹中的scss文件夹下有一个_variables.scss文件夹。它包含引导变量。假设您想更改边界半径。在main.scss文件中，在导入引导程序之前：

$border-radius:10rem
@import "./scss/bootstrap.scss";