[英]Bootstrap 4 Webpack Sass functions not working
Having an issue with Webpack and Bootstrap 4 mixins and functions. Webpack和Bootstrap 4 mixins和功能出现问题。
sass|css loader: 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']
}
}
]
}
imported with: 导入:
@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";
Everything seems to work great, except when it comes to the mixins and functions. 一切似乎都很好,除了在mixin和函数方面。
For example, color: color("purple");
例如,
color: color("purple");
works just fine, and places the proper color, however a simple <span className="badge badge-green ml-2">badge here</span>
loads the base styles for the badge, but not the color variant for green. 可以正常工作,并放置适当的颜色,但是一个简单的
<span className="badge badge-green ml-2">badge here</span>
会加载徽章的基本样式,但不会加载绿色的颜色变体。
There are no errors of any kind, so I'm not sure what's going on. 没有任何类型的错误,所以我不确定发生了什么。
Did you define the color variant "green" in the $theme-colors
bootstrap variable? 您是否在
$theme-colors
bootstrap变量中定义了颜色变体“绿色”?
By default there are the following options only (copied from bootstrap/_variables.scss
): 默认情况下,只有以下选项(从
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
);
The $theme-color
variable is used by all the components for the color modifiers like this (copied from bootstrap/_badge.scss
using the badge component as an example): $theme-color
变量被所有组件用于颜色修饰符,例如bootstrap/_badge.scss
使用badge组件作为示例从bootstrap/_badge.scss
复制):
@each $color, $value in $theme-colors {
.badge-#{$color} {
@include badge-variant($value);
}
}
So if you want to use a color variant "green" you have to register it in the $theme-colors
variable first like this (wherever you override your default bootstrap variables): 因此,如果要使用颜色变体“绿色”,则必须首先将其注册在
$theme-colors
变量中,如下所示(无论您覆盖默认的引导变量)是什么:
$theme-colors: (
"green": #00ff00
);
More info can be found at the documentation for the badge component ( https://getbootstrap.com/docs/4.1/components/badge/ ) and the documentation for theme colors ( https://getbootstrap.com/docs/4.1/getting-started/theming/#theme-colors ) by bootstrap itself. 更多信息可在该徽章组件的文档(可以找到https://getbootstrap.com/docs/4.1/components/badge/ )和主题颜色的文档( https://getbootstrap.com/docs/4.1/getting -booted / theming /#theme-colors )。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.