postcss-loader

Установка

npm i -D postcss-loader

Использование

Configuration

postcss.config.js

module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcss-import': {},
    'postcss-preset-env': {},
    'cssnano': {}
  }
}

Вы можете узнать больше о распространённых конфигурациях PostCSS здесь.

Config Cascade

Вы можете использовать разные postcss.config.js файлы в разных директориях. Поиск конфигурации начинается с path.dirname(file) и идёт вверх по дереву файлов, пока не будет найден файл конфигурации.

|– components
| |– component
| | |– index.js
| | |– index.png
| | |– style.css (1)
| | |– postcss.config.js (1)
| |– component
| | |– index.js
| | |– image.png
| | |– style.css (2)
|
|– postcss.config.js (1 && 2 (recommended))
|– webpack.config.js
|
|– package.json

После настройки вашей postcss.config.js, добавьте postcss-loader в ваш webpack.config.js. Вы можете использовать его автономно или в сочетании с css-loader (рекомендуется). Используйте его после css-loader и style-loader, но перед другими препроцессорными загрузчиками, например, sass|less|stylus-loader, если вы их используете.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'postcss-loader' ]
      }
    ]
  }
}

⚠️ Когда postcss-loader используется автономно (без css-loader ), не используйте @import в вашем CSS, так как это может привести к увеличению объёма бандлов.

webpack.config.js (рекомендуется)

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          { loader: 'css-loader', options: { importLoaders: 1 } },
          'postcss-loader'
        ]
      }
    ]
  }
}

Параметры

Exec

Если вы используете JS-стили без синтаксического анализатора postcss-js, добавьте параметр exec.

webpack.config.js

{
  test: /\.style.js$/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { importLoaders: 1 } },
    { loader: 'postcss-loader', options: { parser: 'sugarss', exec: true } }
  ]
}

Config

Path

Вы можете вручную указать путь для поиска конфигурации (postcss.config.js) с помощью параметра config.path. Это необходимо, если вы храните вашу конфигурацию в отдельной, например, ./config || ./.config папке.

⚠️ В противном случае устанавливать этот параметр не нужно и не рекомендуется

⚠️ Обратите внимание, что вы не можете использовать имя файла, отличное от поддерживаемых форматов конфигурации (например, .postcssrc.js, postcss.config.js), этот параметр позволяет только вручную указать директорию, с которой должен начинаться поиск конфигурации.

webpack.config.js

{
  loader: 'postcss-loader',
  options: {
    config: {
      path: 'path/to/.config/' ✅
      path: 'path/to/.config/css.config.js' ❌
    }
  }
}

Context (ctx)

postcss-loader предоставляет контекст ctx файлу конфигурации, делая вашу postcss.config.js динамической, поэтому вы можете использовать его для выполнения настоящей магии ✨

postcss.config.js

module.exports = ({ file, options, env }) => ({
  parser: file.extname === '.sss' ? 'sugarss' : false,
  plugins: {
    'postcss-import': { root: file.dirname },
    'postcss-preset-env': options['postcss-preset-env'] ? options['postcss-preset-env'] : false,
    'cssnano': env === 'production' ? options.cssnano : false
  }
})

webpack.config.js

{
  loader: 'postcss-loader',
  options: {
    config: {
      ctx: {
        'postcss-preset-env': {...options},
        cssnano: {...options},
      }
    }
  }
}

Plugins

webpack.config.js

{
  loader: 'postcss-loader',
  options: {
    ident: 'postcss',
    plugins: (loader) => [
      require('postcss-import')({ root: loader.resourcePath }),
      require('postcss-preset-env')(),
      require('cssnano')()
    ]
  }
}

⚠️ webpack требует идентификатор (ident) в options при использовании {Function}/require (Сложные параметры). Имя ident может быть произвольным, главное, чтобы оно было уникальным. Рекомендуется назвать его (ident: 'postcss')

Syntaxes

Parser

webpack.config.js

{
  test: /\.sss$/,
  use: [
    ...,
    { loader: 'postcss-loader', options: { parser: 'sugarss' } }
  ]
}

Syntax

webpack.config.js

{
  test: /\.css$/,
  use: [
    ...,
    { loader: 'postcss-loader', options: { syntax: 'sugarss' } }
  ]
}

Stringifier

webpack.config.js

{
  test: /\.css$/,
  use: [
    ...,
    { loader: 'postcss-loader', options: { stringifier: 'midas' } }
  ]
}

SourceMap

Включает поддержку карт исходного кода, postcss-loader будет использовать предыдущую карту исходного кода, предоставленную другими загрузчиками, и обновлять ее соответствующим образом. Если перед postcss-loader не применялся никакой другой загрузчик, загрузчик сгенерирует карту исходного кода для вас.

webpack.config.js

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

'inline'

Вы можете установить опцию sourceMap: 'inline' для вставки карты исходного кода в CSS непосредственно в виде аннотационного комментария.

webpack.config.js

{
  loader: 'postcss-loader',
  options: {
    sourceMap: 'inline'
  }
}

.class { color: red; }

/*# sourceMappingURL=data:application/json;base64, ... */

Примеры

Stylelint

webpack.config.js

{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        plugins: [
          require('postcss-import')(),
          require('stylelint')(),
          ...,
        ]
      }
    }
  ]
}

Autoprefixing

webpack.config.js

{
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'postcss-loader',
      options: {
        ident: 'postcss',
        plugins: [
          require('autoprefixer')({...options}),
          ...,
        ]
      }
    }
  ]
}

:warning: postcss-preset-env включает в себя autoprefixer, поэтому добавление его отдельно не является необходимым, если вы уже используете пресет.

CSS Modules

Этот загрузчик не может быть использован с CSS Модулями «из коробки» из-за того, как css-loader обрабатывает импорты файлов. Чтобы они работали должным образом, добавьте опцию importLoaders загрузчика css-loader.

webpack.config.js

{
  test: /\.css$/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { modules: true, importLoaders: 1 } },
    'postcss-loader'
  ]
}

или используйте postcss-modules вместо css-loader.

CSS-in-JS

Если вы хотите обработать стили, написанные на JavaScript, используйте парсер postcss-js.

webpack.config.js

{
  test: /\.style.js$/,
  use: [
    'style-loader',
    { loader: 'css-loader', options: { importLoaders: 2 } },
    { loader: 'postcss-loader', options: { parser: 'postcss-js' } },
    'babel-loader'
  ]
}

В результате вы сможете писать стили следующим образом

import colors from './styles/colors'

export default {
    '.menu': {
      color: colors.main,
      height: 25,
      '&_link': {
      color: 'white'
    }
  }
}

:warning: Если вы используете Babel, вам необходимо выполнить следующие действия для корректной настройки:

1. Добавьте babel-plugin-add-module-exports в вашу конфигурацию
2. В каждом модуле стилей должен быть только один экспорт default

Извлечение CSS

webpack.config.js

const devMode = process.env.NODE_ENV !== 'production'

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: devMode ? '[name].css' : '[name].[hash].css'
    })
  ]
}