文章/答案/技术大牛

发布

社区首页 >问答首页 >Bootstrap 4 Webpack Sass函数不工作

问Bootstrap 4 Webpack Sass函数不工作
EN

Stack Overflow用户

提问于 2019-01-15 13:56:42

回答 1查看 792关注 0票数 0

对Webpack和Bootstrap 4的混入和函数有问题。

sass|css加载器：

{
    test: /\.(sa|sc|c)ss$/,
    use: [
        // fallback to style-loader in development
        // which creates style nodes from JS strings (IE: imports)
        process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
        {
            loader: 'css-loader',
            options: {
                sourceMap: true
            }
        },
        {
            loader: 'sass-loader',
            options: {
                sourceMap: true,
                includePaths: ['node_modules']
            }
        }
    ]
}

导入时使用：

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/print";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/code";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/tables";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@import "bootstrap/scss/dropdown";
@import "bootstrap/scss/button-group";
@import "bootstrap/scss/input-group";
@import "bootstrap/scss/custom-forms";
@import "bootstrap/scss/nav";
@import "bootstrap/scss/navbar";
@import "bootstrap/scss/card";
@import "bootstrap/scss/breadcrumb";
@import "bootstrap/scss/pagination";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/jumbotron";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/progress";
@import "bootstrap/scss/media";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/modal";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@import "bootstrap/scss/carousel";
@import "bootstrap/scss/utilities";

一切似乎都很好用，除了混入和函数。

例如，color: color("purple");可以很好地工作，并放置适当的颜色，但是一个简单的<span className="badge badge-green ml-2">badge here</span>加载徽章的基本样式，而不是绿色的颜色变体。

没有任何类型的错误，所以我不确定发生了什么。

webpack

sass

bootstrap-4

node-sass

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-01-15 15:00:51

您是否在$theme-colors引导变量中定义了颜色变量“绿色”？

默认情况下，仅有以下选项(从bootstrap/_variables.scss复制)：

$theme-colors: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$theme-colors: map-merge(
  (
    "primary":    $primary,
    "secondary":  $secondary,
    "success":    $success,
    "info":       $info,
    "warning":    $warning,
    "danger":     $danger,
    "light":      $light,
    "dark":       $dark
  ),
  $theme-colors
);

颜色修改器的所有组件都使用$theme-color变量，如下所示(以badge组件为例从bootstrap/_badge.scss复制)：

@each $color, $value in $theme-colors {
  .badge-#{$color} {
    @include badge-variant($value);
  }
}

因此，如果您想要使用颜色变量“绿色”，您必须首先在$theme-colors变量中注册它，如下所示(无论您在何处覆盖默认引导程序变量)：

$theme-colors: (
  "green": #00ff00
);

更多信息可以在bootstrap本身的徽章组件文档(https://getbootstrap.com/docs/4.1/components/badge/)和主题颜色文档(https://getbootstrap.com/docs/4.1/getting-started/theming/#theme-colors)中找到。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54193410

复制

相似问题

问Bootstrap 4 Webpack Sass函数不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 4 Webpack Sass函数不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Bootstrap 4 Webpack Sass函数不工作
EN