Как создать _custom.scss для переопределения переменной в Bootstrap 4 alpha 6

Я пытаюсь настроить тему Bootstrap 4 alpha 6. Я хочу скопировать настройки из файла _variable.scss в _custom.scss для переопределения. Но я не нашел файл _custom.scss в исходном коде. Как мне добавить этот файл _custom.scss в мой проект?


frontend sass bootstrap-4 gulp web-site-project
person Rajib Kumar Bhowmik    schedule 22.04.2017    source источник
comment
Вам нужно создать файл и добавить пользовательскую переменную внутри файла.   -  person Nikhil Thombare    schedule 16.05.2017
comment
Если вы примете ответ, я могу отметить это как дубликат.   -  person Leo    schedule 27.11.2017
comment
bootstrap-4.3.1 Поэкспериментировав некоторое время с _custom.scss, я обнаружил, что проще просто отредактировать _variables.scss. Слияние старой и новой версий после обновления начальной загрузки не должно вызвать затруднений. Вы все равно должны отредактировать bootstrap.scss (добавить @import custom; в случае использования _custom.scss).   -  person Dmitry Somov    schedule 29.03.2019

Ответы (3)


arrow_upward
3
arrow_downward

Я отметил вашу проблему здесь, здесь и здесь:

☐ Рассмотреть возможность реализации _custom.scss для упрощения переопределения встроенных переменных?

Так как ваш Bootstrap 4 не поставляется с файлом _custom.scss, вам нужно только заново создать bootstrap/scss/_custom.scss.

Затем отредактируйте bootstrap/scss/bootstrap.scss таким, каким он должен быть:

// Core variables and mixins
@import "variables";
@import "mixins";
@import "custom";

Затем выполните Настройка переменных

Bootstrap 4 [предположительно] поставляется с файлом _custom.scss для простого переопределения переменных по умолчанию в /scss/_variables.scss. Скопируйте и вставьте соответствующие строки оттуда в файл _custom.scss, измените значения и перекомпилируйте свой Sass, чтобы изменить наши значения по умолчанию. Обязательно снимите флаг !default со значений переопределения.

person Leo    schedule 25.11.2017

arrow_upward
1
arrow_downward

Я не особенно доволен своим текущим решением, но оно просто работает как способ «переопределить» переменные в моей текущей реализации Bootstrap 4 на Angular.

  1. Создайте файл _custom.scss в своем проекте.
  2. Create a new bootstrap.scss in the project
    • Copy the contents of bootstrap.scss from Bootstrap to the new file (e.g., node_modules\bootstrap\scss\bootstrap.scss)
    • Обновите каждый импорт, указав правильное расположение файла относительно нового файла bootstrap.scss.
    • Добавьте импорт для вашего нового пользовательского файла между переменными и миксинами.
  3. Обновите везде, где вы импортируете Bootstrap, чтобы ссылаться на недавно созданный файл bootstrap.scss.

Пример реализации:
Структура папок:

app  
└── styles  
    ├── bootstrap.scss  
    └── _custom.scss

_custom.scss:

// For example, change links to be yellow
$link-color: yellow;

bootstrap.scss содержит:

@import "~bootstrap/scss/variables";
@import "custom";
@import "~bootstrap/scss/mixins";
//etc.

app.component.scss (моё местоположение для любых дополнительных стилей вне Bootstrap):

@import "./styles/bootstrap"; // instead of @import "~bootstrap/scss/bootstrap";
person Sean    schedule 21.11.2017

arrow_upward
-1
arrow_downward

Вы уверены, что используете исходную версию Bootstrap 4 alpha 6? Или случайно не удалили _custom.scss?

Если вы посмотрите на репозиторий git для Boostrap 4 alpha 6, < strong>_custom.scss включен.

person lookininward    schedule 13.06.2017
comment
Ссылка на местоположение, не относящееся к Bootstrap 4 alpha 6 (изменилось) - person Kerry Jones; 23.08.2017