Используйте файл пользовательских переменных начальной загрузки с веб-пакером - PullRequest
Новая
       9

Используйте файл пользовательских переменных начальной загрузки с веб-пакером

0 голосов
/ 25 апреля 2018

Я пытаюсь применить мои собственные переменные начальной загрузки к приложению rails, используя webpacker и bootstrap.

rails new testapp --webpack cd testapp yarn add bootstrap

В моей папке app / javascript / packs у меня есть

  • _custom.scss

  • application.js

  • vendor.scss

application.js: import 'bootstrap'

vendor.scss: @import 'custom'; @import '~bootstrap/dist/css/bootstrap';

custom.scss $brand-success: red !default;

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

Bootstrap работает нормально, однако он не будет компилироваться с моими пользовательскими переменными. У кого-нибудь есть пример такой работы с webpacker?

Ответы [ 2 ]

0 голосов
/ 08 мая 2019

Bootstrap 3

Bootstrap 3 использует меньше препроцессора, поэтому вы должны использовать less-loader .

Сегодня SASS используется гораздо чаще, поэтому весьма вероятно, что вы уже используете sass-loader в конфигурации Webpack.

Для меня хорошо было использовать SASS-версию Bootstrap 3.

  1. Первый шаг - удалить пакет начальной загрузки: 
yarn remove bootstrap
  1. Теперь установите пакет bootstrap-sass (поставляется с загрузочной версией 3.3.6): 
yarn add bootstrap-sass
  1. Из вашего файла SASS / SCSS импортируйте его: 
// Include your variables here, before the import.

@import "~bootstrap-sass/assets/stylesheets/_bootstrap";

Если не удается загрузить глифы

У меня была проблема, что загрузка глификонов не удалась. К счастью, начальная загрузка использует переменную $icon-font-path, чтобы определить, откуда ее загрузить.

Мне пришлось переопределить это так: 

$icon-font-path: "../../fonts/bootstrap/" !default;

Тогда все нормально загружается.

0 голосов
/ 13 июня 2018

Очень просто, вы не компилируете загрузчик, потому что вы используете его уже скомпилированный дистрибутив.

Измените это, и оно будет скомпилировано для пакета 

@import '~bootstrap/scss/bootstrap';
...