Bootstrap 4 Webpack Sass функции не работают

Возникла проблема с миксинами и функциями 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

15.01.2019 06:56

Поиск всех неиспользуемых файлов в проекте

Количество файлов в проекте растет по мере его развития. И если быть по-настоящему честным, их продвижение происходит в геометрической прогрессии...

Настройка шаблона Metronic с помощью Webpack и Gulp

Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они...

799

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы определили вариант цвета "зеленый" в переменной начальной загрузки $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) при начальной загрузке.

да, вот и все! Я недостаточно углубился в документацию! Спасибо!

— 15.01.2019 08:22

15.01.2019 08:00