Build Bootstrap тема для распространения - PullRequest
Новая
       17

Build Bootstrap тема для распространения

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

Моя цель - создать тему Bootstrap для нескольких проектов компании.Я следовал за официальными тематическими документами и создал свой custom.scss. Но как мне создать тему для распространения? Насколько я понимаю, конечным результатом должен быть скомпилированный уменьшенный файл css, такой как my-theme.min.css

Сначала я попробовал SASS Webpack иЗагрузчики CSS, но потом поняли, что целью Webpack является создание пакета JavaScript, а не файла CSS.

Затем я прочитал об официальных инструментах сборки , которые, кажется, делают все, что яхочу, но я не понимаю, как ссылаться на скрипт npm из node_modules и сделать мою custom.scss точкой входа.

Ответы [ 2 ]

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

Я объясню с нуля: Загрузите Ruby, потому что sass написан на Ruby.Откройте «Запустить командную строку с Ruby» и введите: 

gem install sass

Если вы установили загрузчик через менеджер пакетов;запишите этот код в main.scss 

@import "../node_modules/bootstrap/scss/bootstrap";

, затем перейдите в свой рабочий каталог, где вы храните файлы main.scss или main.css.Введите этот код в командную строку: 

sass main.scss main.css

, это инициализирует компиляцию sass в css.

Если вы загрузили исходные файлы начальной загрузки, найдите папку «scss» в исходной папке 

BOOTSTRAP\bootstrap-4.2.1\bootstrap-4.2.1\scss

и скопируйте ее в папку стилей в своем проекте, где хранятся все файлы стилей:Затем css, scss, bootstrap импортируют файл «bootstrap.scss» в main.scss 

@import "./scss/bootstrap.scss";

И теперь инициализируйте компиляцию, введя следующий код: 

sass main.scss main.css

Наконец, вы можете ввести:

sass --watch main.scss:main.css

для просмотра всех изменений в файле main.css НЕ ЗАБЫВАЙТЕ: вы будете записывать свои коды CSS в файл main.scss, sass скомпилирует его в файл main.css и в своем html-файле будет ссылаться на файл main.css.

Если вы используете код Visual Studio, вы можете установить расширение «Live Sass Compiler», и внизу вы увидите кнопку «Watch Sass».создайте файл main.scss в папке style и после импорта файлов, как я объяснил выше, нажмите кнопку «watch Sass», и она начнет компилироваться.

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

Итак, вы выполнили всю работу, и теперь все, что вам нужно, - это преобразовать файл scss в css. Давайте попробуем это шаг за шагом.

  1. Установить узел , если он еще не установлен. https://nodejs.org/en/download/

  2. Установите node-sass глобально, набрав это в терминале: npm install node-sass -g. https://www.npmjs.com/package/node-sass

  3. Преобразуйте scss в css, набрав в терминале node-sass style.scss style.css, где ваш style.scss - это файл, который вы создали, а style.css - файл, который вы хотите чтобы генерировать. Следуйте режиму командной строки для получения дополнительных параметров: https://www.npmjs.com/package/node-sass#command-line-interface

В дальнейшем вы хотите минимизировать сгенерированный файл CSS. Вы можете сделать это, перейдя по общей ссылке в 3-м пункте: node-sass style.scss style.css --output-style compressed.

...