postcss-loader

免责声明：postcss-loader 是由社区成员维护的第三方软件包，它可能与 webpack 具有不同的支持、安全策略或许可证，并且不受 webpack 维护。

Webpack 讨论：

PostCSS 聊天：

用于使用 PostCSS 处理 CSS 的加载器。

入门

你需要 webpack v5 才能使用最新版本。对于 Webpack v4，你必须安装 postcss-loader v4。

首先，你需要安装 postcss-loader 和 postcss

npm install --save-dev postcss-loader postcss

或

yarn add -D postcss-loader postcss

或

pnpm add -D postcss-loader postcss

然后将该插件添加到你的 webpack 配置中。例如

在以下配置中，使用了插件 postcss-preset-env，该插件未默认安装。

file.js

import css from "file.css";

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

使用配置文件的替代用法

postcss.config.js

module.exports = {
  plugins: [
    [
      "postcss-preset-env",
      {
        // Options
      },
    ],
  ],
};

该加载器自动搜索配置文件。

webpack.config.js

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

并通过你首选的方法运行 webpack。

`execute`

类型

type execute = boolean;

默认值：undefined

在 CSS-in-JS 中启用 PostCSS 解析器支持。如果你使用 JS 样式 postcss-js 解析器，请添加 execute 选项。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.style.js$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                parser: "postcss-js",
              },
              execute: true,
            },
          },
        ],
      },
    ],
  },
};

`postcssOptions`

请参阅文件 https://github.com/webpack-contrib/postcss-loader/blob/master/src/config.d.ts。

类型

import type { Config as PostCSSConfig } from "postcss-load-config";
import type { LoaderContext } from "webpack";

type PostCSSLoaderContext = LoaderContext<PostCSSConfig>;

interface PostCSSLoaderAPI {
  mode: PostCSSLoaderContext["mode"];
  file: PostCSSLoaderContext["resourcePath"];
  webpackLoaderContext: PostCSSLoaderContext;
  env: PostCSSLoaderContext["mode"];
  options: PostCSSConfig;
}

export type PostCSSLoaderOptions =
  | PostCSSConfig
  | ((api: PostCSSLoaderAPI) => PostCSSConfig);

默认值：undefined

允许设置 PostCSS 选项 和插件。

支持所有 PostCSS 选项。有一个特殊的 config 选项用于配置文件。它如何工作以及如何配置将在下面描述。

我们建议不要指定 from、to 和 map 选项，因为这可能导致源映射中的路径错误。如果你需要源映射，请使用 sourcemap 选项。

对于大型项目，为了优化加载器的性能，最好在加载器配置中提供 postcssOptions 并指定 config: false。此方法消除了在编译期间多次查找和加载外部配置文件的需要。

`object`

设置 plugins

webpack.config.js（推荐）

const myOtherPostcssPlugin = require("postcss-my-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.sss$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: [
              "postcss-import",
              ["postcss-short", { prefix: "x" }],
              require.resolve("my-postcss-plugin"),
              myOtherPostcssPlugin({ myOption: true }),
              // Deprecated and will be removed in the next major release
              { "postcss-nested": { preserveEmpty: true } },
            ],
          },
        },
      },
    ],
  },
};

webpack.config.js（已弃用，将在下一个主要版本中移除）

module.exports = {
  module: {
    rules: [
      {
        test: /\.sss$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            plugins: {
              "postcss-import": {},
              "postcss-short": { prefix: "x" },
            },
          },
        },
      },
    ],
  },
};

设置 syntax

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.sss$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            // Can be `string`
            syntax: "sugarss",
            // Can be `object`
            syntax: require("sugarss"),
          },
        },
      },
    ],
  },
};

设置 parser

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.sss$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            // Can be `string`
            parser: "sugarss",
            // Can be `object`
            parser: require("sugarss"),
            // Can be `function`
            parser: require("sugarss").parse,
          },
        },
      },
    ],
  },
};

设置 stringifier

webpack.config.js

const Midas = require("midas");
const midas = new Midas();

module.exports = {
  module: {
    rules: [
      {
        test: /\.sss$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            // Can be `string`
            stringifier: "sugarss",
            // Can be `object`
            stringifier: require("sugarss"),
            // Can be `function`
            stringifier: midas.stringifier,
          },
        },
      },
    ],
  },
};

`function`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(css|sss)$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: (loaderContext) => {
            if (/\.sss$/.test(loaderContext.resourcePath)) {
              return {
                parser: "sugarss",
                plugins: [
                  ["postcss-short", { prefix: "x" }],
                  "postcss-preset-env",
                ],
              };
            }

            return {
              plugins: [
                ["postcss-short", { prefix: "x" }],
                "postcss-preset-env",
              ],
            };
          },
        },
      },
    ],
  },
};

`config`

类型

type config = boolean | string;

默认值：true

允许使用配置文件设置选项。配置文件中指定的选项与传递给加载器的选项相结合，加载器选项会覆盖配置文件中的选项。

配置文件

加载器将在目录树中搜索以下位置的配置

package.json 中的 postcss 属性
JSON 或 YAML 格式的 .postcssrc 文件
.postcssrc.json、.postcssrc.yaml、.postcssrc.yml、.postcssrc.js 或 .postcssrc.cjs 文件
导出对象的 CommonJS 模块 postcss.config.js 或 postcss.config.cjs（推荐）

配置文件示例

使用 object 表示法

postcss.config.js（推荐）

module.exports = {
  // You can specify any options from https://postcss.org.cn/api/#processoptions here
  // parser: 'sugarss',
  plugins: [
    // Plugins for PostCSS
    ["postcss-short", { prefix: "x" }],
    "postcss-preset-env",
  ],
};

使用 function 表示法

postcss.config.js（推荐）

module.exports = (api) => {
  // `api.file` - path to the file
  // `api.mode` - `mode` value of webpack, please read https://webpack.js.cn/configuration/mode/
  // `api.webpackLoaderContext` - loader context for complex use cases
  // `api.env` - alias `api.mode` for compatibility with `postcss-cli`
  // `api.options` - the `postcssOptions` options

  if (/\.sss$/.test(api.file)) {
    return {
      // You can specify any options from https://postcss.org.cn/api/#processoptions here
      parser: "sugarss",
      plugins: [
        // Plugins for PostCSS
        ["postcss-short", { prefix: "x" }],
        "postcss-preset-env",
      ],
    };
  }

  return {
    // You can specify any options from https://postcss.org.cn/api/#processoptions here
    plugins: [
      // Plugins for PostCSS
      ["postcss-short", { prefix: "x" }],
      "postcss-preset-env",
    ],
  };
};

postcss.config.js（已弃用，将在下一个主要版本中移除）

module.exports = {
  // You can specify any options from https://postcss.org.cn/api/#processoptions here
  // parser: 'sugarss',
  plugins: {
    // Plugins for PostCSS
    "postcss-short": { prefix: "x" },
    "postcss-preset-env": {},
  },
};

配置级联

您可以在不同的目录中使用不同的 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 加载器从右到左/从下到上进行评估）。

webpack.config.js（推荐）

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

`boolean`

启用/禁用自动加载配置。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            config: false,
          },
        },
      },
    ],
  },
};

字符串

允许指定配置文件的路径。

webpack.config.js

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "postcss-loader",
        options: {
          postcssOptions: {
            config: path.resolve(__dirname, "custom.config.js"),
          },
        },
      },
    ],
  },
};

`sourceMap`

类型

type sourceMap = boolean;

默认值：取决于 compiler.devtool 值

默认情况下，源映射的生成取决于 devtool 选项。除了 eval 和 false 值之外，所有值都启用源映射生成。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader", options: { sourceMap: true } },
          { loader: "postcss-loader", options: { sourceMap: true } },
          { loader: "sass-loader", options: { sourceMap: true } },
        ],
      },
    ],
  },
};

备用设置

webpack.config.js

module.exports = {
  devtool: "source-map",
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "postcss-loader" },
          { loader: "sass-loader" },
        ],
      },
    ],
  },
};

`implementation`

类型

type implementation = object;

implementation 的类型应与 postcss.d.ts 相同

默认值：postcss

特殊的 implementation 选项决定使用哪个 PostCSS 实现。覆盖本地安装的 postcss 的 peerDependency 版本。

此选项仅对下游工具作者真正有用，以简化 PostCSS 7 到 8 的过渡。

`function`

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          {
            loader: "postcss-loader",
            options: { implementation: require("postcss") },
          },
          { loader: "sass-loader" },
        ],
      },
    ],
  },
};

字符串

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          {
            loader: "postcss-loader",
            options: { implementation: require.resolve("postcss") },
          },
          { loader: "sass-loader" },
        ],
      },
    ],
  },
};

示例

SugarSS

您需要安装 sugarss

npm install --save-dev sugarss

使用 SugarSS 语法。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.sss$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: { importLoaders: 1 },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                parser: "sugarss",
              },
            },
          },
        ],
      },
    ],
  },
};

Autoprefixer

您需要安装 autoprefixer

npm install --save-dev autoprefixer

使用 autoprefixer 向 CSS 规则添加供应商前缀。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: { importLoaders: 1 },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "autoprefixer",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

警告
postcss-preset-env 包含 autoprefixer，因此如果您已经使用预设，则无需单独添加它。更多信息

PostCSS 预设环境

你需要安装postcss-preset-env

npm install --save-dev postcss-preset-env

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: { importLoaders: 1 },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  [
                    "postcss-preset-env",
                    {
                      // Options
                    },
                  ],
                ],
              },
            },
          },
        ],
      },
    ],
  },
};

CSS 模块

什么是CSS 模块？请阅读。

postcss-loader 方面不需要其他选项。为了让它们正常工作，添加 css-loader 的 importLoaders 选项。

webpack.config.js

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

CSS-in-JS 和 `postcss-js`

你需要安装postcss-js

npm install --save-dev postcss-js

如果你想处理用 JavaScript 编写的样式，请使用 postcss-js 解析器。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.style.js$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2,
            },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                parser: "postcss-js",
              },
              execute: true,
            },
          },
          "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

使用 mini-css-extract-plugin。

webpack.config.js

const isProductionMode = process.env.NODE_ENV === "production";

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: isProductionMode ? "production" : "development",
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          isProductionMode ? MiniCssExtractPlugin.loader : "style-loader",
          "css-loader",
          "postcss-loader",
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: isProductionMode ? "[name].[contenthash].css" : "[name].css",
    }),
  ],
};

发出资产

要将 PostCSS 插件中的资产写入 webpack，需要在 result.messages 中添加一条消息。

消息应包含以下字段

type = asset - 消息类型（必需，应等于 asset）
file - 文件名（必需）
content - 文件内容（必需）
sourceMap - sourceMap
info - 资产信息

webpack.config.js

const postcssCustomPlugin = (opts = {}) => {
  return {
    postcssPlugin: "postcss-custom-plugin",
    Once: (root, { result }) => {
      result.messages.push({
        type: "asset",
        file: "sprite.svg",
        content: "<svg>...</svg>",
      });
    },
  };
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [postcssCustomPlugin()],
              },
            },
          },
        ],
      },
    ],
  },
};

添加依赖项、contextDependencies、buildDependencies、missingDependencies

webpack 需要依赖项来了解何时需要对已更改的文件重新编译。

有两种添加依赖项的方法

（推荐）。插件可以在 result.messages 中发出消息。

消息应包含以下字段

type = dependency - 消息类型（必需，应等于 dependency、context-dependency、build-dependency 或 missing-dependency）
file - 绝对文件路径（必需）

webpack.config.js

const path = require("path");

const postcssCustomPlugin = (opts = {}) => {
  return {
    postcssPlugin: "postcss-custom-plugin",
    Once: (root, { result }) => {
      result.messages.push({
        type: "dependency",
        file: path.resolve(__dirname, "path", "to", "file"),
      });
    },
  };
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [postcssCustomPlugin()],
              },
            },
          },
        ],
      },
    ],
  },
};

或者你可以使用现成的插件 postcss-add-dependencies。

在插件中传递 loaderContext。

webpack.config.js

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                config: path.resolve(__dirname, "path/to/postcss.config.js"),
              },
            },
          },
        ],
      },
    ],
  },
};

postcss.config.js

module.exports = (api) => ({
  plugins: [
    require("path/to/postcssCustomPlugin.js")({
      loaderContext: api.webpackLoaderContext,
    }),
  ],
});

postcssCustomPlugin.js

const path = require("path");

const postcssCustomPlugin = (opts = {}) => {
  return {
    postcssPlugin: "postcss-custom-plugin",
    Once: (root, { result }) => {
      opts.loaderContext.addDependency(
        path.resolve(__dirname, "path", "to", "file"),
      );
    },
  };
};

postcssCustomPlugin.postcss = true;
module.exports = postcssCustomPlugin;

贡献

如果您尚未阅读，请花点时间阅读我们的贡献指南。

贡献

许可证

« 上一页

postcss-loader

入门

选项

execute

postcssOptions

object

function

config

配置文件

配置文件示例

配置级联

boolean

字符串

sourceMap

implementation

function

字符串

示例

SugarSS

Autoprefixer

PostCSS 预设环境

CSS 模块

CSS-in-JS 和 postcss-js

提取 CSS

发出资产

添加依赖项、contextDependencies、buildDependencies、missingDependencies

贡献

许可证

`execute`

`postcssOptions`

`object`

`function`

`config`

`boolean`

`sourceMap`

`implementation`

`function`

CSS-in-JS 和 `postcss-js`