postcss-loader

装载机的 WebPack 处理 CSS 与 PostCSS

安装

npm i -D postcss-loader

用法

postcss.config.js

module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': {},
    '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 (recommended)

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

选项

名称	类型	默认值	描述
exec	{Boolean}	undefined	在CSS-in-JS中启用PostCSS Parser支持
parser	{String|Object}	undefined	设置PostCSS Parser
syntax	{String|Object}	undefined	设置PostCSS语法
stringifier	{String|Object}	undefined	设置PostCSS Stringifier
config	{Object}	undefined	设置postcss.config.js配置路径&& ctx
plugins	{Array|Function}	[]	设置PostCSS插件
sourceMap	{String|Boolean}	false	启用源地图

Exec

如果您使用不带postcss-js解析器的 JS 样式，请添加exec选项。

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

Config

名称	类型	默认值	描述
path	{String}	undefined	PostCSS配置路径
context	{Object}	undefined	PostCSS配置上下文

Path

您可以postcss.config.js使用该config.path选项手动指定要搜索 config（）的路径。如果您将您的配置存储在单独的./config || ./.config文件夹中，这是必需的。

Otherwise️ 否则无需设置此选项，不建议使用

webpack.config.js

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

Context (ctx)

名称	类型	默认值	描述
env	{String}	'development'	process.env.NODE_ENV
file	{Object}	loader.resourcePath	extname, dirname, basename
options	{Object}	{}	Options

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-cssnext': options.cssnext ? options.cssnext : false,
    'autoprefixer': env == 'production' ? options.autoprefixer : false,
    'cssnano': env === 'production' ? options.cssnano : false
  }
})

webpack.config.js

{
  loader: 'postcss-loader',
  options: {
    config: {
      ctx: {
        cssnext: {...options},
        cssnano: {...options},
        autoprefixer: {...options}
      }
    }
  }
}

Plugins

webpack.config.js

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

⚠️webpack ident在使用options时需要一个标识符（）{Function}/require（复杂选项）。该ident可只要它是唯一可以自由命名。建议将其命名为（ident: 'postcss'）

Syntaxes

名称	类型	默认值	描述
parser	{String|Function}	undefined	Custom PostCSS Parser
syntax	{String|Function}	undefined	Custom PostCSS Syntax
stringifier	{String|Function}	undefined	Custom PostCSS Stringifier

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的加载器，加载器将为您生成源地图。

警告：如果应用了像 eg 之类的以前的加载器，sass-loader并且sourceMap设置了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')(),
          ...,
        ]
      }
    }
  ]
}

CSS Modules

由于css-loader流程文件导入的方式，此加载器无法与 CSS 模块一起使用。为了使它们正常工作，可以添加 css-loader 的importLoaders选项。

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 解析器。

{
  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'
    }
  }
}

警告：如果您使用的是 Babel，则需要执行以下操作才能使设置生效

• 将 babel-plugin-add-module-exports 添加到您的配置中

• 每个样式模块只需要一个默认导出

提取 CSS

webpack.config.js

const ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: [
            { loader: 'css-loader', options: { importLoaders: 1 } },
            'postcss-loader'
          ]
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[name].css')
  ]
}