我正在尝试自定义Bootstrap 4 alpha 6主题。我想将设置从_variable.scss文件复制到_custom.scss以覆盖。但是我在源代码中没有找到_custom.scss文件。如何在项目中添加此_custom.scss文件?
vnjpjtjt1#
我注意到你的问题here,here和here:考虑实现一个_custom.scss来实现更简单的内置变量重写吗?因此,由于Bootstrap 4没有附带_custom.scss文件,因此您只需要重新创建bootstrap/scss/_custom.scss。然后将bootstrap/scss/bootstrap.scss编辑为它应该是什么:
_custom.scss
bootstrap/scss/_custom.scss
bootstrap/scss/bootstrap.scss
// Core variables and mixins @import "variables"; @import "mixins"; @import "custom";
然后按照Customising variablesBootstrap 4附带了一个_custom.scss文件,可以轻松覆盖/scss/_variables.scss中的默认变量。将其中的相关行复制并粘贴到_custom.scss文件中,修改值,然后重新编译Sass以更改默认值。确保从覆盖值中删除!default标志。
/scss/_variables.scss
!default
zengzsys2#
我对我目前的解决方案不是特别满意,但它只是作为一种“覆盖”Bootstrap 4的Angular实现中的变量的方法。1.在项目中创建_custom.scss文件
文件夹结构:
app └── styles ├── bootstrap.scss └── _custom.scss
_custom.scss:
// For example, change links to be yellow $link-color: yellow;
bootstrap.scss包含:
@import "~bootstrap/scss/variables"; @import "custom"; @import "~bootstrap/scss/mixins"; //etc.
app.component.scss(Bootstrap之外的任何其他样式的位置):
@import "./styles/bootstrap"; // instead of @import "~bootstrap/scss/bootstrap";
o8x7eapl3#
你确定你使用的是Bootstrap 4 alpha 6的源代码版本吗?还是没有意外删除**_custom.scss**?如果你看一下git repo for Boostrap 4 alpha 6,_custom.scss包含在内。
3条答案
按热度按时间vnjpjtjt1#
我注意到你的问题here,here和here:
考虑实现一个
_custom.scss
来实现更简单的内置变量重写吗?因此,由于Bootstrap 4没有附带
_custom.scss
文件,因此您只需要重新创建bootstrap/scss/_custom.scss
。然后将
bootstrap/scss/bootstrap.scss
编辑为它应该是什么:然后按照Customising variables
Bootstrap 4附带了一个
_custom.scss
文件,可以轻松覆盖/scss/_variables.scss
中的默认变量。将其中的相关行复制并粘贴到_custom.scss
文件中,修改值,然后重新编译Sass以更改默认值。确保从覆盖值中删除!default
标志。zengzsys2#
我对我目前的解决方案不是特别满意,但它只是作为一种“覆盖”Bootstrap 4的Angular实现中的变量的方法。
1.在项目中创建_custom.scss文件
示例实现:
文件夹结构:
_custom.scss:
bootstrap.scss包含:
app.component.scss(Bootstrap之外的任何其他样式的位置):
o8x7eapl3#
你确定你使用的是Bootstrap 4 alpha 6的源代码版本吗?还是没有意外删除**_custom.scss**?
如果你看一下git repo for Boostrap 4 alpha 6,_custom.scss包含在内。