Gulp 如何在Bootstrap 4 alpha 6中创建_custom.scss来覆盖变量

ntjbwcob  于 2023-09-28  发布在  Gulp
关注(0)|答案(3)|浏览(213)

我正在尝试自定义Bootstrap 4 alpha 6主题。我想将设置从_variable.scss文件复制到_custom.scss以覆盖。但是我在源代码中没有找到_custom.scss文件。如何在项目中添加此_custom.scss文件?

vnjpjtjt

vnjpjtjt1#

我注意到你的问题hereherehere
考虑实现一个_custom.scss来实现更简单的内置变量重写吗?
因此,由于Bootstrap 4没有附带_custom.scss文件,因此您只需要重新创建bootstrap/scss/_custom.scss
然后将bootstrap/scss/bootstrap.scss编辑为它应该是什么:

// Core variables and mixins
@import "variables";
@import "mixins";
@import "custom";

然后按照Customising variables
Bootstrap 4附带了一个_custom.scss文件,可以轻松覆盖/scss/_variables.scss中的默认变量。将其中的相关行复制并粘贴到_custom.scss文件中,修改值,然后重新编译Sass以更改默认值。确保从覆盖值中删除!default标志。

zengzsys

zengzsys2#

我对我目前的解决方案不是特别满意,但它只是作为一种“覆盖”Bootstrap 4的Angular实现中的变量的方法。
1.在项目中创建_custom.scss文件

  • 在项目中创建新的bootstrap.scss
  • 将bootstrap.scss的内容从Bootstrap复制到新文件(例如,node_modules\bootstrap\scss\bootstrap.scss)
  • 使用相对于新bootstrap.scss文件的正确文件位置更新每个导入
  • 在变量和mixin之间为新的自定义文件添加导入
  • 更新您导入Bootstrap的任何地方,以引用新创建的bootstrap.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";
o8x7eapl

o8x7eapl3#

你确定你使用的是Bootstrap 4 alpha 6的源代码版本吗?还是没有意外删除**_custom.scss**?
如果你看一下git repo for Boostrap 4 alpha 6_custom.scss包含在内。

相关问题