如何从引导程序中获取仅支持导航栏菜单而不支持整个引导程序库的 scss 文件？

Posted 2023-03-05

【中文标题】如何从引导程序中获取仅支持导航栏菜单而不支持整个引导程序库的 scss 文件？

【英文标题】：How to get scss files from bootstrap that will support me only navbar menu and not entire bootstrap lib?

【发布时间】：2019-08-18 21:43:07

【问题描述】：

我从引导程序下载 scss 文件时遇到问题，我有太多不需要的 @import 我只需要 @import nav 和 navbar 但发生了很多错误。是否有任何引导代码生成器或任何其他方式来帮助我解决这个问题？

【参考方案1】：

很难说为什么你没有看到你的代码就会得到这么多错误，但一般来说，如果你只想要nav和navbar的样式，你可以像这样导入：

// custom.scss
// Required
@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";

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

假设你的项目结构是：

WebProject
- Assets
  - css
    - custom.scss
- node_modules
  - bootstrap

【讨论】：

我需要补充一点，这仅适用于您在 bootstrap.scss 文件夹内而不是在自定义类之外并且顺序非常重要的情况！谢谢你的回答！

@Neo：不，修改现有的bootstrap.scss 没有意义，因为当有更新版本的引导程序可用并且您使用 Nuget 或 npm 获取最新版本时，它将覆盖你已经完成了。对于我上面的例子，我在custom.scss 里面做这件事！这就是创建一个单独的文件（称为 custom.scss）来引用 bootstrap 并将其重新编译到您自己的主题中的全部意义，而不仅仅是引用 bootstrap.css。