@kq1995

Как пользоваться препроцессорами, отличными от SCSS и SASS?

Подскажите пожалуйста как пользоваться препроцессором, отличным от SASS или SCSS? С этими двумя легко т.к. есть GUI app для винды, которая автоматом будет компилировать все, где все понятно и т.д.

Но если я хочу использовать PostCSS, то так не получится. Нужны (как по мне) длинные танцы с бубном.
Можете обьяснить как это можно сделать "по-простому"?

Пользуюсь Вебштормом, но при создании файлов .pcss они не компилируются, хотя плагин установлен.
  • Вопрос задан
  • 95 просмотров
Пригласить эксперта
Ответы на вопрос 2
web_Developer_Victor
@web_Developer_Victor
Что такое google?
GUI для новичков (сам когда-то использовал Koala). Все true программисты используют CLI. Сегодня лучше всего настроить Gulp или WebPack для сборки проекта, которые сразу скомпилируют код предпроцессоров на чистый CSS.
В них много плюсов:
  • Кастомизация
  • Управления с командной строки (не нужно переключиться между окнами, а сразу в WebStorm запустил и можешь смотреть весь log)
  • Легкость (не потребляет много ресурсов ПК)


Эти инструменты не только компилируют PostCSS, а и могут оптимизировать картинки, HTML, CSS, JS, собрать все в один файл, вставлять svg в html и много другого.
Ответ написан
delphinpro
@delphinpro
frontend developer
Какие танцы с бубном?

  1. Поставить на машину nodejs
  2. Написать gulpfile.js
  3. Установить пакеты
  4. Начать пользоваться.


Самое сложное здесь (но не сложное в целом) — это написать gulpfile.

Пример задачи для компиляции sass

import gulp from 'gulp';
import gulpSass from 'gulp-sass';

export const sass = function(){
  return gulp.src('./src/sass/*.scss')
    .pipe(gulpSass())
    .pipe(gulp.dest('./dis/css/'));
}


Запускаем
npm run sass
И получаем скомпилированный файл.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы