Поиск по метке: SCSS

С приходоим ES7 в JS пришли import-ы и export-ы. Жить стало веселее, и... сложнее. Появилось много заморочек и вообще новых проблем. Одна из таких проблем выглядит так: `import some from ../../../../../some`. Знакомая ситуация?

Обычно её в случае webpack-а решают при помощи модуля module-resolver. Он позволяет в .babelrc (или где вы держите конфигурацию) указывать регулярные выражения для автозамены, а также добавляет поддержку root-записей. Скажем с ним можно указать `import actions from '@actions/header', где `@actions` будет алиасом к какому-нибудь пути в вашем проекте. 

Дальше встаёт вопрос инструментов. А как на это должен реагировать редактор? Как он узнает, что теперь пути в import-ах устроены хитрее. Что делать с линтингом? К счастью, для eslint есть такой плагин:  eslint-plugin-import. С редакторами ситуация может быть сложнее.

Хорошо, а что делать с SCSS\Sass? Нормальных рабочих решений с наскоку мне найти не удалось. Но как оказалось, всё можно решить относительно просто. В настройках webpack для sass-loader-а можно указать настройки. Они будут переданы как есть в пакет node-sass. А вот он, оказывается, достаточно гибкий. Если там указать метод importer, то можно навязать свою логику обработки @import-ов. Пример:

{
	loader: 'sass-loader',
	options:
	{
		sourceMap: true,
		url: false,
		importer: url => (
		{
			file: url
				.replace(...)
				.replace(...)
				.replace(...),
		}),
	},
}

Либо даже выцепить ваши настройки прямо из настроек в .babelrc.

Небольшая заметка о том, как подключить в webpack и в ваше приложение postCSS с поддержкой SCSS/SASS синтаксиса.

• Устанавливаем npm i --save css-loader node-sass sass-loader style-loader postcss-loader
• Добавляем в webpack.config.js новый loader в раздел module.loaders такую вот цепочку:

  {
    test: /\.scss$/,
    loaders: ['style', 'css', 'postcss', 'sass']
  }
  

• Подключаем в нужном JS-файле стили: import './main.scss'
• Запускаем webpack

Потребовалась вереница loader-ов. В случае необходимости можно ещё понастраивать postcss (см. документацию к postcss-loader-у).

Сразу отмечу, что я не имею никакого отношения к миру ruby. Изредка пишу простые скриптики для небольших личных нужд, не углубляясь ни в дебри языка, ни в его окружение. В очередной раз обновив с нуля систему, я снова столкнулся с задачей установки compass-а. И в очередной раз все стандартные способы надо мною надругались. Казалось бы, linuxmint ― это просто разновидность ubuntu, самого популярного репозитория, а значит установка популярной либы не должна быть проблемой. Но нет...

Установить compass можно как-минимум двумя способами. Первый это привычный нам aptitude: sudo aptitude install ruby-compass. Программа устанавливается без ошибок, и даже позволяет узнать её версию. Но вот работать отказывается на отрез, ругаясь на отсутствие какого fssm. Быстрый поиск решения проблемы результатов не дал. Выполнив sudo aptitude purge ruby-compass, я решил воспользоваться стандартным механизмом для ruby ― gem. Итак: gem install compass выбрасывает мне ошибку доступа. Дескать в /usr/... ему недостучаться, и он просит root-а. Такое поведение мне кажется странным, но ладно, ок, установим из под root-а. Установка проходит успешно, но вот сам compass после этого запускаться отказывается. Нужен root. Вот это уже действительно странно. 

В конечном счёте я нагуглил установку с таким вот ключём gem install --user-install compass. Установка прошла успешно. Но вот никаких удобных ссылок для запуска программы не было создано. Пришлось руками лепить ссылку к ~/.gem/ruby/1.9.1/gems/compass-1.0.1/bin/compass. Теперь всё работает. 

Самое удивительное, так это то, что далеко не каждый пакет из gem требует таких вот бубнов. И что на офиц. сайте compass-а предлагают не суетиться, и просто запустить gem install compass. Такие вот дела. 

Статей про SASS(SCSS), Less на хабрахабре уже полно, но на мой взгляд не хватает такой, в которой было бы немного реальной практики. Я постараюсь восполнить этот пробел. Около года назад одна из SASS-статей меня «зацепила», и с тех пор я полюбил эту технологию настолько, что ручной набор обычного CSS кода представляется мне лишней тратой времени. Сия статья посвящается тем верстальщикам (или web-программистам), которые про SCSS ещё не слышали, или же ещё не пробовали в деле. Более опытным товарищам, полагаю, в ней ловить нечего.

подробности…