Ответ
Для компиляции Sass в Webpack нужно:
- Установить необходимые пакеты:
npm install sass-loader sass css-loader style-loader --save-dev- Добавить правило в
module.rulesконфига Webpack:
module: {
rules: [
{
test: /.s[ac]ss$/i,
use: [
'style-loader', // вставляет стили в DOM
'css-loader', // превращает CSS в CommonJS модули
'sass-loader' // компилирует Sass в CSS
]
}
]
}Для production лучше использовать MiniCssExtractPlugin вместо style-loader для выноса стилей в отдельные файлы. Порядок лоадеров важен - они применяются справа налево.
Ответ 18+ 🔞
Слушай, а вот этот ваш Webpack, он же, блядь, реально может в Sass компилировать? Ну, чтобы эти ваши модные штуки с вложенностью и переменными? Да запросто, ёпта! Но для этого надо немного пошаманить, как говорится, волшебства на коленке.
Первым делом, конечно, надо всю эту требуху в проект запихнуть. Открываешь терминал и пишешь заклинание:
npm install sass-loader sass css-loader style-loader --save-devВот эти sass и sass-loader — это главные герои, они и будут превращать твой сассовый бред в нормальный CSS. А css-loader со style-loader — это уже их подручные, которые результат в браузер протащат.
Дальше самое интересное — конфиг Webpack'а. Ты его открываешь, ищешь этот блок module.rules (а если не ищешь, то создаёшь, мудак), и туда вот эту хуйню вставляешь:
module: {
rules: [
{
test: /.s[ac]ss$/i, // Ловит файлы .scss и .sass
use: [
'style-loader', // Впендюривает стили прямо в DOM, как только модуль загрузится
'css-loader', // Превращает CSS в эти ваши CommonJS модули
'sass-loader' // Главный по превращению — берёт Sass и делает из него CSS
]
}
]
}Запомни раз и навсегда, ёпта: порядок лоадеров — это пиздец как важно! Они применяются справа налево, или, если по-твоему, снизу вверх. Сначала sass-loader скормит Sass'у, потом css-loader разберётся с CSS, и в конце style-loader всё это в голову документа воткнёт.
А теперь, блядь, важный момент! Всё это хорошо для разработки, когда стили прямо в <style> теги вставляются. Но когда ты будешь продакшен-сборку делать, тебе же не нужно, чтобы всё в одном файле было? Тут на сцену выходит MiniCssExtractPlugin. Он вместо того, чтобы в DOM тыкать, выносит все стили в отдельные .css файлы. Это, блядь, и для кэширования хорошо, и загрузку ускоряет. Так что на продакшене меняй style-loader на этого красавца.
Вот и вся магия, сука. Ничего сложного, просто надо знать, какую кнопку жать.