webpack - Bootstrap 4 Webpack Sass 功能不起作用
问题描述
Webpack 和 Bootstrap 4 mixin 和函数存在问题。
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";
一切似乎都很好,除了 mixins 和函数。
例如,color: color("purple");
工作得很好,并放置了正确的颜色,但是一个简单<span className="badge badge-green ml-2">badge here</span>
的加载了徽章的基本样式,而不是绿色的颜色变体。
没有任何错误,所以我不确定发生了什么。
解决方案
$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
变量被所有组件用于这样的颜色修饰符(从bootstrap/_badge.scss
使用徽章组件作为示例复制):
@each $color, $value in $theme-colors {
.badge-#{$color} {
@include badge-variant($value);
}
}
因此,如果您想使用颜色变体“绿色”,则必须$theme-colors
先将其注册到变量中,如下所示(无论您在何处覆盖默认引导变量):
$theme-colors: (
"green": #00ff00
);
更多信息可以在徽章组件的文档(https://getbootstrap.com/docs/4.1/components/badge/)和主题颜色的文档(https://getbootstrap.com/docs/4.1/getting -started/theming/#theme-colors)通过引导程序本身。
推荐阅读
- java - java on linux - hide ssl.keyStorePassword
- generic-programming - 如何实现通用 Kafka Streams Deserializer
- r - suppressing some of the plots from plot(allEffects(model)) output
- c# - Returning just one integer from a list within a list using lambda C#
- service - quartzjob wont let me start service?
- ios - 缓慢滚动时TableView滞后
- php - 删除变量内的数组
- java - 如何从表单发送对象作为属性
- python - Python 查找并替换带有计算机主机名的通用 HOSTID
- python - 准备 JSON 以发布到 elasticsearch