Как использовать набор инструментов Bootstrap 4 для дальнейшей настройки - PullRequest
Новая
       23

Как использовать набор инструментов Bootstrap 4 для дальнейшей настройки

0 голосов
/ 02 мая 2018

Следуя странице темы в документации Bootstrap , я могу успешно скомпилировать файл custom.scss в CSS в моем проекте NPM, который соответствует рекомендуемой структуре файла: 

my-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

Однако я не удовлетворен этим выводом CSS; Я хотел бы использовать дополнительные инструменты, которые использует Bootstrap, такие как autoprefixer и minifier. Например, мой custom.scss скомпилирует, а затем выведет оба файла custom.css и custom.min.css - так же, как и при запуске npm run css-minify-main в исходной папке Bootstrap. На странице документации по инструментам сборки Bootstrap *1016* даже описывается, как это сделать, но ничего не говорится об интеграции пользовательских SCSS в этот процесс.

В качестве потенциального обходного пути, установка всех тех же devDependencies и копирование scripts из bootstrap / package.json в мой проект не только будут избыточными. Потребуется активное обслуживание (например, если источник был обновлен с помощью npm или даже отслеживание репозитория Git и т. Д.), Чтобы обеспечить актуальность всех версий, проверить, были ли добавлены / удалены deps, и т. Д. на. Итак, есть ли способ запустить эти точные сценарии из my-project/ вместо my-project/node_modules/bootstrap/ исходной папки?

Ответы [ 2 ]

0 голосов
/ 06 марта 2019

Если вам нужна быстрая неконфигурируемая настройка для использования и настройки набора инструментов начальной загрузки, вы можете использовать laravel-mix . Он поставляется с автоматическим префиксом, конкатенацией и минимизацией CSS / JS, перезагрузкой в ​​реальном времени и другими опциями. В основном, это для фреймворка Laravel, но его можно легко использовать для автономных проектов без Laravel.

0 голосов
/ 03 марта 2019

Вы можете запустить скрипт в Bootstrap package.json из ваших проектов package.json. Создайте свой собственный CSS, а затем запустите другой сценарий, который переключается в папку /node_modules/bootstrap и запускает нужные сценарии Bootstrap npm.

Например, в my-project/ package.json

"scripts": {
    "build-css": "node-sass ./scss/custom.scss -o public/css/ && npm run bootstrap-scripts",
    "bootstrap-scripts": "cd ../node_modules/bootstrap && npm-run-all css-prefix css-minify" 
    ...
},

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

...