Как скомпилировать scss в css

Как скомпилировать bootstrap scss в css

Я использую только button.js (5.09kb) и просто хочу, чтобы кнопка была связана с css.

Я могу вручную получить все CSS, связанные с кнопками, но это требует времени, чтобы пройти через 9000 строк в bootstrap.css .

Пример некоторого ручного css:

В архиве есть папка scss, полная всех отдельных таблиц стилей

Например, в _button-group.scss :

Там есть все, что мне нужно, связанное с кнопками.

Поэтому я попытался использовать http://beautifytools.com/scss-compiler.php, но я получаю эта ошибка:

На сайте указано: «Введите полный URL в операторы @import, если они есть в вашем коде scss».

Так что есть более глобальная информация scss, на которую мне нужно ссылаться. Я предполагаю, что у того, кто разрабатывает все эти загрузочные материалы, есть хорошая программа, чтобы разработать все эти scss красиво и индивидуально. если кто-нибудь знает, как я могу скомпилировать кнопку scss, дайте мне знать. единственная идея, которая у меня есть для "ссылки" на них сама, — это добавить все остальные scss в тот же исходный файл, но тогда это просто скомпилирует весь этот исходный код. пожалуйста помоги.

Как скомпилировать scss в css с узлом-sass

У меня есть master.scss со многими импортами из других файлов .scss. Если я изменяю файл * .scss, то master.css генерируется автоматически.

Я использую только NPM, нет Gulp или ворчание! Так и должно оставаться.

Мой текущий сценарий сборки:

Это хорошо, но требует много времени для компиляции!

Теперь я пытаюсь использовать узел-sass . Он должен компилироваться очень быстро. К сожалению, я не совсем понимаю его . узел-sass установлен, через npm install node-sass

Где я могу использовать следующее (Из документов)?

Это не так в package.json , верно?

Сценарий хороший. Как я могу его использовать?

Это приведет к компиляции всех файлов sass (которые не начинаются с подчеркивания) в каталог build/css/.

Я надеюсь на вашу помощь!

3 ответа

я хотел бы скомпилировать все файлы SCSS, которые находятся внутри папки scss и не импортируются (имена файлов не начинаются с _ ) каждый в отдельный файл CSS( который имеет то же имя, что и файл SCSS ). такие функциональные возможности, которые могут быть найдены в Prepros. можно ли это сделать с.

Я использую SCSS в своем проекте NodeJS, и мой скрипт работает, чтобы превратить все мои отдельные файлы SCSS в один файл CSS, используя следующую команду node-sass -w public/css/scss/style.scss public/css/style.css Моя единственная проблема заключается в том, что я также хочу, чтобы файл CSS был.

Если это вариант для вас, я бы рекомендовал использовать grunt, это сделает все намного проще и быстрее. Этот плагин grunt, вероятно, является лучшим вариантом: https://www.npmjs.com/package/grunt-contrib-sass

Я следовал учебнику, который вы прислали, и он очень прост. Вы создаете файл в корневой папке с именем "package.json", содержащий следующее:

Затем откройте командную строку в корневой папке и выполните следующие действия:

Вышеприведенный узел установки-sass

Затем вы бежите:

Вышеизложенное создает задачу наблюдения, поэтому вам не нужно повторять node-sass каждый раз, когда вы вносите изменения

И в последний раз ты бежишь

Если вы хотите автоматически компилировать файлы, вам нужно поставить флаг-w

Режим watch в node-sass не запускает первую компиляцию. Он предполагает, что вы уже запустили node-sass .

Лично я использую что-то вроде этого:

И вы можете использовать его следующим образом: npm run sass:watch

Я не могу скомпилировать scss-файлы в css после запуска приложения с помощью npm start. Есть ли способ жить перезагрузить sass в css, как ts компилируются в js утилитой tsc:w.So, я должен остановить сборку, а затем выполнить команду gulp watch или node-sass для компиляции scss в css, а затем снова.

Я установил Bootstrap CSS с SASS из следующего РЕПО: https://github.com/twbs/bootstrap-sass Я запустил команду bower install bootstrap-sass в командной строке, и это успешно установило папку bower_components в мою папку проекта. (Кстати — у меня пока ничего другого нет, я хочу сначала научиться.

Похожие вопросы:

Я использую SASS, чтобы написать свой CSS, но это не стандарт, где я работаю. Если другой разработчик работает с CSS, он работает непосредственно с файлом .css. Есть ли вообще возможность.

Мы пытаемся скомпилировать наши файлы sass в файлы css, однако мы хотим скомпилировать каждый отдельный файл sass в отдельный файл css (one-to-one). Например, наш product_view.scss должен иметь.

Я пытаюсь скомпилировать несколько файлов .scss в один файл CSS. Это действительно работает, но захватывает только первый файл. sass: < // Task dist: < files: < ‘css/test.css’:’sass/*.scss’ >> >.

я хотел бы скомпилировать все файлы SCSS, которые находятся внутри папки scss и не импортируются (имена файлов не начинаются с _ ) каждый в отдельный файл CSS( который имеет то же имя, что и файл.

Я использую SCSS в своем проекте NodeJS, и мой скрипт работает, чтобы превратить все мои отдельные файлы SCSS в один файл CSS, используя следующую команду node-sass -w public/css/scss/style.scss.

Я не могу скомпилировать scss-файлы в css после запуска приложения с помощью npm start. Есть ли способ жить перезагрузить sass в css, как ts компилируются в js утилитой tsc:w.So, я должен остановить.

Я установил Bootstrap CSS с SASS из следующего РЕПО: https://github.com/twbs/bootstrap-sass Я запустил команду bower install bootstrap-sass в командной строке, и это успешно установило папку.

У меня есть этот шаблон — веб-шаблон — редакционный , когда я добавил его в свое существующее приложение Meteor , он не загружает scss files , только файл css, который находится в каталоге клиента.

Как скомпилировать scss в css

Я боролся с настройкой libsass, поскольку это было не так просто, как транспилятор на основе Ruby. Может кто-нибудь объяснить, как:

  1. установить libsass?
  2. использовать его из командной строки?
  3. использовать его с бегунами задач, такими как gulp и grunt?

У меня мало опыта работы с диспетчерами пакетов и тем более с исполнителями задач.

Ответы

Я выбрал средство реализации node-sass для libsass, потому что оно основано на node.js.

Установка node-sass

  • (Предварительное условие) Если у вас нет npm, сначала установите Node.js.
  • $ npm install -g node-sass устанавливает node-sass глобально -g .

Надеюсь, это установит все, что вам нужно, если не читать libsass внизу.

Как использовать node-sass из командной строки и скриптов npm

  1. $ node-sass my-styles.scss my-styles.css компилирует отдельный файл вручную.
  2. $ node-sass my-sass-folder/ -o my-css-folder/ компилирует все файлы в папке вручную.
  3. $ node-sass -w sass/ -o css/ автоматически компилирует все файлы в папке при изменении исходных файлов. -w добавляет наблюдение за изменениями в файле (файлах).

Более полезные параметры, такие как «сжатие» @ здесь . Командная строка хороша для быстрого решения, однако вы можете использовать средства запуска задач, такие как Grunt.js или Gulp.js, для автоматизации процесса сборки.

Вы также можете добавить приведенные выше примеры в скрипты npm. Чтобы правильно использовать сценарии npm в качестве альтернативы gulp, прочтите эту исчерпывающую статью @ css-tricks.com, особенно прочтите о групповых задачах .

  • Если в каталоге вашего проекта нет файла package.json при запуске $ npm init создаст его. Используйте его с -y чтобы пропустить вопросы.
  • Добавьте "sass": "node-sass -w sass/ -o css/" в scripts в файл package.json . Это должно выглядеть примерно так:
  • $ npm run sass скомпилирует ваши файлы.

Как использовать с глотком

  • $ npm install -g gulp устанавливает Gulp глобально.
  • Если в каталоге вашего проекта нет файла package.json запускаемый $ npm init создаст его. Используйте его с -y чтобы пропустить вопросы.
  • $ npm install —save-dev gulp устанавливает Gulp локально. —save-dev добавляет gulp к devDependencies в package.json .
  • $ npm install gulp-sass —save-dev устанавливает gulp-sass локально.
  • Настройте gulp для своего проекта, создав файл gulpfile.js в корневой папке проекта со следующим содержимым:

Базовый пример транспиляции

Добавьте этот код в свой gulpfile.js:

$ gulp sass запускает указанную выше задачу, которая компилирует файл (ы) .scss в папке sass и генерирует файл (ы) .css в папке css .

Чтобы облегчить жизнь, давайте добавим часы, чтобы нам не приходилось собирать их вручную. Добавьте этот код в свой gulpfile.js :

Все готово! Просто запустите задачу просмотра:

Как использовать с Node.js

Как следует из названия node-sass, вы можете написать свои собственные скрипты node.js для транспиляции. Если вам интересно, посетите страницу проекта node-sass.

А как насчет libsass?

Libsass — это библиотека, которую должен создать разработчик, такой как sassC или, в нашем случае, node-sass. Node-sass содержит встроенную версию libsass, которую использует по умолчанию. Если файл сборки не работает на вашем компьютере, он пытается собрать libsass для вашего компьютера. Для этого процесса требуется Python 2.7.x (3.x на сегодняшний день не работает). Кроме того:

LibSass требует GCC 4.6+ или Clang / LLVM. Если ваша ОС более ранняя, эта версия может не компилироваться. В Windows вам понадобится MinGW с GCC 4.6+ или VS 2013 Update 4+. Также возможно собрать LibSass с помощью Clang / LLVM в Windows.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *