Bootstrap和Sass：将SCSS文件转换为CSS时出错,错误：未定义的变量@each $color，$value in $theme-colors-rgb

我想缩小引导文件bootstrap.min.css的大小。我发现一个很好的方法是先使用SASS，然后使用SCSS，这样我就可以只导入我需要的特定组件。我从来没有使用过，只使用过CSS。我使用的是最新版本的Bootstrap，我正在Bootstrap中下载Sass [源文件][1]。
当我尝试将scss文件转换为css时，我得到一个错误。我已经读过几个关于stackoverflow的解决方案（例如import @import "../scss/bootstrap/maps";），但它们对我没有帮助。以下是错误：

Error: Undefined variable.
    ╷
21 │ @each $color, $value in $theme-colors-rgb {
    │ ^^^^^^^^^^^^^^^^^
    ╵
   scss/bootstrap/_root.scss 21:27 @import
   scss/custom.scss 16:9 root stylesheet

字符串
路径为Desktop/myproject/scss/bootstrap。以下是我执行的步骤：
1.在项目中，我添加了scss文件夹。在里面，我创建了一个名为bootstrap的文件夹，所有的ssc文件都存在其中。所以myproject/scss/bootstrap（从上面的链接下载）。
1.在项目中，我添加了一个名为custom. scss的文件。所以myproject/scss/custom.scss
3.在custom.scss文件中（我在自定义中只有这个，然后文件中没有任何东西），我添加了我需要的组件的名称：

@import "../scss/bootstrap/functions";
@import "../scss/bootstrap/variables";
@import "../scss/bootstrap/mixins";
@import "../scss/bootstrap/root";
@import "../scss/bootstrap/reboot";
@import "../scss/bootstrap/type";
@import "../scss/bootstrap/images";
@import "../scss/bootstrap/containers";
@import "../scss/bootstrap/grid";
@import "../scss/bootstrap/offcanvas";
@import "../scss/bootstrap/navbar";
@import "../scss/bootstrap/card";
@import "../scss/bootstrap/dropdown";
@import "../scss/bootstrap/list-group";
@import "../scss/bootstrap/nav";

型
1.我尝试将custom.scss文件转换为bootstrap.min-news.css，然后在Visual Studio终端中编写：sass scss/custom.scss:css/bootstrap.min-new.css
我怎样才能转换文件而不会得到错误？谢谢你的好意

P.S：如果我也尝试导入@import "../scss/bootstrap/maps";，我会得到错误：

Error: Undefined variable.
    ╷
55 │ "primary": $primary-text-emphasis-dark,
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^

型

更新

相反，如果我导入@import "../scss/bootstrap/variables-dark"，问题就解决了，编译也正确地进行了，但是我不想使用variables-dark，我不需要它，文件大小不必要地增加了。我的目标是缩小

好了，我测试了这个非常基本的bootstrap 5.2.3 npm安装编译scss。
摘自5.2文档，参见文档版本中的注解版本……
https://getbootstrap.com/docs/5.2/customize/sass/#importing
这个scss导入命令对我来说编译得很好……

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";

字符串
但是，如果我在bootstrap 5.3.0中运行上面相同的scss，我会得到这个错误...

SassError: Undefined variable.
   ╷
55 │     "primary": $primary-text-emphasis-dark,
   │                ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵

型
所以我检查了5.3的文档，并且添加了变量dark scss...
https://getbootstrap.com/docs/5.3/customize/sass/#importing

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";

型
编译上面的scss现在可以运行了。

更新1

所以上面提供的代码是引导css框架工作的最低限度。
然后，您开始在实用程序之后添加额外的组件，如下所示...

// core files
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";

// extra components
@import "bootstrap/scss/offcanvas";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/nav";

型
上面的代码以180 kib编译css。
如果你还在为编译后的大小太大而挣扎，你可以从$theme-color贴图中移除颜色。

// core files
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";

// remove colours
$theme-colors: map-remove($theme-colors, "body", "secondary", "tertiary", "emphasis", "border", "primary", "danger", "warning", "info", "light", "dark");

// core files continued
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/utilities";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/containers";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/helpers";
@import "bootstrap/scss/utilities/api";

// extra components
@import "bootstrap/scss/offcanvas";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/nav";

型
这是167 kib。
但你可能不想删除每一种颜色，尤其是阴影，例如，你可能只是做的颜色…

$theme-colors: map-remove($theme-colors, "info", "light", "dark");

型
希望这对你有帮助。

更新2

例如，如果你使用@import "bootstrap/scss/alerts";，这将在你编译的css中创建这些类。

.alert-primary
.alert-secondary
.alert-success
.alert-danger
.alert-warning
.alert-info
.alert-light
.alert-dark

型
通过使用map-remove这样...

$theme-colors: map-remove($theme-colors, "primary", "secondary", "info", "light", "dark");

型
这将只编译这些警报颜色...

.alert-success
.alert-danger
.alert-warning

型
这将对使用$theme-colors贴图生成组件颜色变体的任何内容执行相同的操作。
如果你没有使用颜色，你可以从$theme-colors贴图中删除，这将减少你的css的大小，并稍微加快编译速度。

Bootstrap和Sass：将SCSS文件转换为CSS时出错,错误：未定义的变量@each $color，$value in $theme-colors-rgb

1条答案

相关问题

热门标签

最新问答