[英]Bootstrap 4 Webpack Sass functions not working
Webpack和Bootstrap 4 mixins和功能出現問題。
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";
一切似乎都很好,除了在mixin和函數方面。
例如, color: color("purple");
可以正常工作,並放置適當的顏色,但是一個簡單的<span className="badge badge-green ml-2">badge here</span>
會加載徽章的基本樣式,但不會加載綠色的顏色變體。
沒有任何類型的錯誤,所以我不確定發生了什么。
您是否在$theme-colors
bootstrap變量中定義了顏色變體“綠色”?
默認情況下,只有以下選項(從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
使用badge組件作為示例從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 -booted / theming /#theme-colors )。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.