Настройка препроцессора SASS, подключение postcss плагинов

В этой статье мы продолжим настраивать шаблон Webpack 4. Подключим mini-css-extract-plugin для SCSS (Sass) препроцессора, также разберемся с другими препроцессорами. Подключим post CSS плагины: autoprefixer, css-mqpacker, cssnano

Подробнее:

1. Подключим плагины для полной минификации стилей
2. Добавим обработчик на css и scss файлы
3. По аналогии можно будет подключить stylus или любой другой препроцессор
4. Рассмотрим как подключать css библиотеки прямо в scss
5. Напишем общий каркас для стилей чтобы тратить на адаптив максимум 20 минут

Создание scss и css папок в webpack

Для начала давайте создадим css и scss файлы в нашей сборке webpack`а. Для этого в папке src создадим папки css и scss далее, в них создадим файлы main.scss и main.css

Структура шаблона будет выглядеть следующим образом

src
    js
        common.js
    css
        main.css
    scss
        main.scss
    index.js

Установка mini-css-extract-plugin

Установка mini-css-extract-plugin необходима чтобы разделить наш js код от css кода. Установим его и лоадер для css через npm: npm install css-loader mini-css-extract-plugin --save-dev

Теперь пропишем правила:

rules: [
    {
        test: /\.css$/,
        use: [
            loader: MiniCssExtractPlugin.loader
            ]
    }
]

Теперь заведем константу с этим плагином в файле конфигураций вебпака const MiniCssExtractPlugin = require("mini-css-extract-plugin");

Теперь, благодаря переменной мы можем обращаться к этому плагину. Самое важное, что нужно сделать это зарегистрировать этот плагин. Для этого в самом внизу файла конфига создадим массив с плагинами, где первым (и пока единственным) будет MiniCssExtractPlugin. Обратимся к переменной и зарегистрируем плагин:

    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
        })
    ],

В index.js также пропишем наш файл css import './css/main.css'

Вот и все, теперь мы можем обрабатывать css файлы и единственное, что осталось сделать - прописать в index.html наш новый css файл:

<link rel="stylesheet" href="/dist/app.css">

Webpack 4 SASS. Обработка

С css мы разобрались остался только scss или, как принято называть - SASS.

Установим все необходимые пакеты: npm install style-loader sass-loader node-sass --save-dev

Также еще нужен css-loader, но мы уже установили его при обработки css.

Пропишем в конфигурациях обработку наших sass файлов

{
  test: /\.scss$/,
  use: [
    'style-loader',
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: { sourceMap: true }
    }, {
      loader: 'sass-loader',
      options: { sourceMap: true }
    }
  ]
}

В index.js также пропишем наш файл scss import './scss/main.scss'

Вот и все, теперь вспомним про 2 наших ярлыка в package.json:

"scripts": {
  "dev": "webpack-dev-server --open --mode development",
  "build": "webpack --mode production"
},

Запустим ярлык dev. Все наши SASS и CSS файлы обрабатываются отдельно

Настройка postcss

Первое что нужно сделать - создать файл postcss.config.js в директории src/js/

В файле postcss.config.js пропишем следующее:

// note: npm install postcss-loader autoprefixer css-mqpacker cssnano --save-dev
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('css-mqpacker'),
    require('cssnano')({
      preset: [
        'default', {
          discardComments: {
            removeAll: true,
          }
        }
      ]
    })
  ]
}

Настройка и установка postcss плагинов

Для настройки и установки postcss плагинов сначала их нужно установить. Устанавливать мы будем 3 самых нужных плагина, которые уже описали выше:

• autoprefixer - проставляет префиксы стилям
• css-mqpacker - сжимает медиа запросы
• cssnano - максимально минифицирует исходные стили

Установим их через npm: npm install postcss-loader autoprefixer css-mqpacker cssnano --save-dev

Для работы автопрефиксера в файле package.json пропишем следующее:

"browserslist": [
  "> 1%",
  "last 3 version"
],

Postcss-loader для css и sass

Чтобы подключить postcss-loader для css и sass файлов в файле конфигураций вебпака прописываем следующее для css:

{
  test: /\.css$/,
  use: [
    'style-loader',
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: { sourceMap: true }
    }, {
      loader: 'postcss-loader',
      options: { sourceMap: true, config: { path: 'src/js/postcss.config.js' } }
    }
  ]
}

А для sass конфиг будет такой:

{
  test: /\.scss$/,
  use: [
    'style-loader',
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: { sourceMap: true }
    }, {
      loader: 'postcss-loader',
      options: { sourceMap: true, config: { path: 'src/js/postcss.config.js' } }
    }, {
      loader: 'sass-loader',
      options: { sourceMap: true }
    }
  ]
}

Заключение

Мы настроили обработку css и scss файлов, подключили postcss плагины для конечной минификации стилей. postcss.config.js максимально просто масштабируется, так как теперь подключать любой плагин можно установив его через npm и просто прописав в файл postcss.config.js

Исходный код из видео: На гитахбе