Настройка препроцессора SASS, подключение postcss плагинов
  • 2019-01-31
  • 3
  • 2

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

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

Ссылка на видео - https://youtu.be/qqTIqwQX8nc

Что сделаем?

  • Подключим плагины для полной минификации стилей.
  • Добавим обработчик на css и scss файлы
  • По аналогии можно будет подключить stylus или любой другой препроцессор
  • Рассмотрим как подключать css библиотеки прямо в scss
  • Напишем общий каркас для стилей чтобы тратить на адаптив максимум 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 пропишем следующее:

      // 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

          Исходный код из видео: https://github.com/vedees/webpack-template