# @automattic/mini-css-extract-plugin-with-rtl 中文文档

规范地址：https://npmcn.com/package/%40automattic/mini-css-extract-plugin-with-rtl/

版本：0\.8\.0
npm 元数据更新时间：2026-11-06T18:39:22.307Z
中文译文更新时间：2026-11-07T07:06:30.562Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40automattic/mini-css-extract-plugin-with-rtl
原文对照：https://npmcn.com/package/%40automattic/mini-css-extract-plugin-with-rtl/?lang=original
项目主页：https://github.com/automattic/mini-css-extract-plugin-with-rtl
源码仓库：https://github.com/automattic/mini-css-extract-plugin-with-rtl

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：52.7 kB，9 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>= 6\.9\.0
- 运行依赖：4 个
- peer 依赖：webpack ^4\.4\.0
- 首次发布：2019-11-27T11:23:42.336Z
- 最新版本发布：2019-11-27T11:23:42.730Z
- 近 30 天下载量：2911（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

将 CSS 提取到单独的文件中

## 安装

```sh
npm install @automattic/mini-css-extract-plugin-with-rtl
```

也可以使用：`pnpm add @automattic/mini-css-extract-plugin-with-rtl`、`yarn add @automattic/mini-css-extract-plugin-with-rtl`、`bun add @automattic/mini-css-extract-plugin-with-rtl`

## README

此插件为叉 [微型 cs- 提取插件](https://github.com/webpack-contrib/mini-css-extract-plugin) 但是,有支持 [网络包装RTLPlugin](https://github.com/romainberger/webpack-rtl-plugin)。也就是说,它允许根据页面当前方向加载Async CSS文件。 请检查access-date=中的日期值 (帮助) 已提及软件包学习如何使用.

```bash
npm install --save-dev mini-css-extract-plugin-with-rtl
```

## 使用量

### 配置

**网络包装. config.js**

```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin-with-rtl");
const WebpackRTLPlugin = require("webpack-rtl-plugin");

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name].css',
      chunkFilename: '[id].css',
      rtlEnabled: true,
      // Global variable (e.g., `window.pageDir`) whose value determines whether to load the LTR or
      // RTL version of a CSS chunk at runtime. Value should be either `"ltr"` or `"rtl"`. If the
      // `rtlGlobalVar` option is not specified, we check `document.dir` by default.
      rtlGlobalVar: 'pageDir' 

    }),
    new WebpackRTLPlugin() // You must not pass filename option
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it uses publicPath in webpackOptions.output
              publicPath: '../',
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};
```

### 贷项

最初由Maxim Valenko创建为 [bershanoe/mini-cs-extract-plugin- with-trtl (英语)](https://github.com/beshanoe/mini-css-extract-plugin-with-rtl)。自动更新插件以使用最新 `mini-css-extract-plugin` 上游版本,重组承诺结构,使叉子更容易维护,并增加了对 `data-webpack` 属性 `<link>` 插入到 HTML 正文中的标记.

原文 `mini-css-extract-plugin` 从这里开始读取

* * *

![](https://cdn.worldvectorlogo.com/logos/javascript.svg) [![](https://cdn.rawgit.com/webpack/media/e7485eb2/logo/icon-square-big.svg)](https://webpack.js.org/)

# 微型 cs- 提取插件

[![npm](https://img.shields.io/npm/v/mini-css-extract-plugin.svg)](https://npmjs.com/package/mini-css-extract-plugin) [![deps](https://david-dm.org/webpack-contrib/mini-css-extract-plugin.svg)](https://david-dm.org/webpack-contrib/mini-css-extract-plugin) [![tests](https://dev.azure.com/webpack-contrib/mini-css-extract-plugin/_apis/build/status/webpack-contrib.mini-css-extract-plugin?branchName=master)](https://dev.azure.com/webpack-contrib/mini-css-extract-plugin/_build/latest?definitionId=6&branchName=master) [![coverage](https://codecov.io/gh/webpack-contrib/mini-css-extract-plugin/branch/master/graph/badge.svg)](https://codecov.io/gh/webpack-contrib/mini-css-extract-plugin) [![chat](https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg)](https://gitter.im/webpack/webpack)

此插件将 CSS 提取到单独的文件中 。 它每个JS文件创建一个CSS文件,包含CSS. 它支持CSS和SourceMaps的On-Demand-Loading.

它建立在一个新的webpack v4特性(模块类型)之上,需要webpack 4才能工作.

与取出-text-webpack-plugin相比:

-   同步装入
-   无重复汇编(性能)
-   便于使用
-   CSS 专用软件

## 安装

```bash
npm install --save-dev mini-css-extract-plugin
```

## 使用量

### 配置

#### `publicPath`

类型 : `String|Function` 默认: `publicPath` 内 `webpackOptions.output`

指定目标文件的自定义公共路径.

#### 最小示例

**网络包装. config.js**

```js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // all options are optional
      filename: '[name].css',
      chunkFilename: '[id].css',
      ignoreOrder: false, // Enable to remove warnings about conflicting order
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // you can specify a publicPath here
              // by default it uses publicPath in webpackOptions.output
              publicPath: '../',
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};
```

#### `publicPath` 函数示例

**网络包装. config.js**

```js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: (resourcePath, context) => {
                // publicPath is the relative path of the resource to the context
                // e.g. for ./css/admin/main.css the publicPath will be ../../
                // while for ./css/main.css the publicPath will be ../
                return path.relative(path.dirname(resourcePath), context) + '/';
              },
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};
```

#### 高级配置示例

此插件只应在 `production` 无 `style-loader` 在加载器链中,特别是如果您想要HMR `development`。 。 。 .

这里举出一个例子,可以把高血压和高血压都纳入 `development` 在文件中提取的样式 `production` 建设.

(Loaders选项留待明确,相应适应您的需要. )

**网络包装. config.js**

```js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: devMode ? '[name].css' : '[name].[hash].css',
      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === 'development',
            },
          },
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },
};
```

#### 热舱重装

提取-mini-cs-plugin支持在开发中热重装实际的cs文件. 提供了一些选项,使标准样式表和本地范围CSS或CSS模块的HMR成为可能. 下面是带CSS模块的用于HMR的小型cs的示例配置.

当我们尝试hmr css -模块。 在按照自定义块名进行代码共享时不容易执行 . `reloadAll` 只有在HMR不能正确工作的情况下,才能启用这个选项. cs-module的核心挑战在于,当代码分割时,与文件名相比,块代号可以并确实不同.

**网络包装. config.js**

```js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // only enable hot in development
              hmr: process.env.NODE_ENV === 'development',
              // if hmr does not work, this is a forceful method.
              reloadAll: true,
            },
          },
          'css-loader',
        ],
      },
    ],
  },
};
```

### 尽量减少用于生产

要最小化输出, 请使用一个插件, 如 [优化-cs-assets-webpack-插件](https://github.com/NMFR/optimize-css-assets-webpack-plugin)设置 `optimization.minimizer` 覆盖 Web 包提供的默认值, 所以要确保同时指定 JS 最小化 :

**网络包装. config.js**

```js
const TerserJSPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};
```

### 特征

#### 使用预装或内嵌 CSS

运行时代码检测器已经通过 `<link>` 或者说 `<style>` 标签. 在服务器侧插入CSS用于Server-Side-Rendering时,此功能可能有用. 这个 `href` 会 议 日 程 和 议 程 `<link>` 标记必须匹配用于装入 CSS 块的 URL . 这个 `data-href` 属性可用于 `<link>` 财务报告和审定财务报表 `<style>` 我也一样. 嵌入CSS时 `data-href` 必须使用.

#### 在一个文件中提取全部 CSS

类似什么 [取出文本- 网包- 插件](https://github.com/webpack-contrib/extract-text-webpack-plugin) 已经,CSS 可用 CSS 文件提取 `optimization.splitChunks.cacheGroups`。 。 。 .

**网络包装. config.js**

```js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};
```

#### 根据条目提取 CSS

您也可以根据 Webpack 条目名提取 CSS 。 如果您动态导入路径, 这尤其有用 但希望你的CSS能按条目排列 这还防止了CSS重复问题 提取 TextPlugin .

```javascript
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

function recursiveIssuer(m) {
  if (m.issuer) {
    return recursiveIssuer(m.issuer);
  } else if (m.name) {
    return m.name;
  } else {
    return false;
  }
}

module.exports = {
  entry: {
    foo: path.resolve(__dirname, 'src/foo'),
    bar: path.resolve(__dirname, 'src/bar'),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        fooStyles: {
          name: 'foo',
          test: (m, c, entry = 'foo') =>
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true,
        },
        barStyles: {
          name: 'bar',
          test: (m, c, entry = 'bar') =>
            m.constructor.name === 'CssModule' && recursiveIssuer(m) === entry,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};
```

#### 模块文件名选项

与 `moduleFilename` 选项可以使用块数据自定义文件名。 这对于处理多个切入点和希望从文件名中获取对某个切入点/切入点的更多控制特别有用。 在下面的例子中,我们将使用 `moduleFilename` 将生成的 css 输出到不同的目录.

```javascript
const miniCssExtractPlugin = new MiniCssExtractPlugin({
  moduleFilename: ({ name }) => `${name.replace('/js/', '/css/')}.css`,
});
```

#### 长期缓存

长期缓存用途 `filename: "[contenthash].css"`可选添加 `[name]`。 。 。 .

### 删除顺序警告

对于通过一致使用范围界定或命名公约来减轻cs命令的项目,cs命令警告可以通过为插件设置被忽略的命令旗来禁用.

```javascript
new MiniCssExtractPlugin({
  ignoreOrder: true,
}),
```

### 媒体查询插件

如果您想从提取的 CSS 中提取媒体查询( 因此移动用户不再需要装入桌面或平板电脑特定 CSS), 您应该使用以下插件之一 :

-   [媒体查询插件](https://github.com/SassNinja/media-query-plugin)
-   [媒体查询分拆插件](https://github.com/mike-diamond/media-query-splitting-plugin)

## 许可证

[麻省理工学院](https://npmcn.com/package/%40automattic/mini-css-extract-plugin-with-rtl/LICENSE)

## 常见问题

### @automattic/mini-css-extract-plugin-with-rtl 是什么？

将 CSS 提取到单独的文件中

### 如何安装 @automattic/mini-css-extract-plugin-with-rtl？

在项目目录运行 npm install @automattic/mini-css-extract-plugin-with-rtl，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：webpack（^4\.4\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @automattic/mini-css-extract-plugin-with-rtl 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/automattic\_\_mini-css-extract-plugin-with-rtl 是否存在。

### @automattic/mini-css-extract-plugin-with-rtl 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @automattic/mini-css-extract-plugin-with-rtl 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>= 6\.9\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @automattic/mini-css-extract-plugin-with-rtl 可以商用吗？

@automattic/mini-css-extract-plugin-with-rtl 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @automattic/mini-css-extract-plugin-with-rtl 的下载量有多少？

根据 npm 官方下载统计，@automattic/mini-css-extract-plugin-with-rtl 在 2026/10/07 – 2026/11/05 这 30 天内被下载 2,911 次，日均约 97 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @automattic/mini-css-extract-plugin-with-rtl 还在维护吗？

最新版本 0\.8\.0 发布于 2019/11/27（6 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2019/11/27。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。