webpack 自定义引导样式，不带“警告：您可能不想在此处的插值中使用颜色值蓝色,`

xpszyzbs 于 2023-05-29 发布在 Webpack

关注(0)|答案(1)|浏览(203)

我一直遵循这个指南（https：//getbootstrap.com/docs/5.0/customize/sass/#importing）来导入 Bootstrap 的样式以进行进一步修改。

// Custom.scss
// Option B: Include parts of Bootstrap

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

// 5. Add additional custom code here

但是，在生成应用程序时，将显示以下警告。

WARNING: You probably don't mean to use the color value blue in interpolation here.
It may end up represented as blue, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "blue").
If you really want to use the color value here, use '"" + $color'.

9      --#{$variable-prefix}#{$color}: #{$value};
^^^^^^

node_modules/bootstrap/scss/_root.scss 9:28  @import
src/assets/styles/custom.scss 19:9              root stylesheet

第19行指向@import "../node_modules/bootstrap/scss/root";
我试着解决这个问题，但还没能做到。我所做的是在应用程序代码中到处引用custom.scss，而不是bootstrap.scss。
有没有人遇到过这个警告，如何解决这个警告的根源，如果它被忽略了，这意味着什么（应用程序似乎显示了适当的风格刚刚好-但是我怀疑捆绑的css可能包含重复，因为它相当大）？

webpack

来源：https://stackoverflow.com/questions/74818656/custom-bootstrap-styles-without-warning-you-probably-dont-mean-to-use-the-col

1条答案

按热度按时间

7cwmlq891#

当我开始为我的项目做一些颜色定义时，我也犯了同样的错误。就像这样：

$colors: (
    stone: (
        100: hsl(210, 40%, 96%),
        200: hsl(214, 32%, 91%),
        300: hsl(213, 27%, 84%),
        400: hsl(215, 20%, 65%),
        500: hsl(215, 16%, 47%),
    ),
    gray: (
        100: hsl(220, 14%, 96%),
        200: hsl(220, 13%, 91%),
        300: hsl(216, 12%, 84%),
        400: hsl(218, 11%, 65%),
        500: hsl(220, 9%, 46%),
    )...

在那之后，我试着在这上面插入。

@use './abstracts' as vars;

.#{vars.$prefix} {
    @each $color, $shades in vars.$colors {
        @each $prop, $value in $shades {
            --#{vars.$prefix}color-#{$color}-#{$prop}: #{$value};
        }
    }
}

由于这是一个嵌套数组，嵌套的@each也是必要的。这就是错误发生的地方。当前版本的SASS试图避免重新定义颜色，而不认识到颜色名称只是整个名称的一部分。
解决方案是将组合名称存储在中间变量中，然后使用它。

@use './abstracts' as vars;

.#{vars.$prefix} {
    @each $color, $shades in vars.$colors {
        @each $prop, $value in $shades {
            $property: #{vars.$prefix}color-#{$color}-#{$prop};
            --#{$property}: #{$value};
        }
    }
}

但是，这并不是问题的直接解决方案，因为您的定义来自 Bootstrap 源。你必须在 Bootstrap 库中为它打开一个问题，或者自己修复bug并创建一个PR。但我希望它能帮助其他遇到这样问题的人。

赞(0）回复(0）举报 2023-05-29

我来回答

webpack 自定义引导样式，不带“警告：您可能不想在此处的插值中使用颜色值蓝色,`

1条答案

相关问题

热门标签

最新问答