如何使用SASS扩展/修改(自定义)Bootstrap 4

twitter-bootstrap CSS

LGil

2020-03-27

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

我虽然从GitHub克隆了Bootstrap并直接对其进行了更改,但是我听说这实际上不是一个好习惯。你能给我一些建议吗?

第3800篇《如何使用SASS扩展/修改(自定义)Bootstrap 4》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
斯丁前端 2020.03.27

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

LGil 2020.03.27

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";

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android