mini-css-extract 插件与 postcss 抛出 this.getOptions 不是一个函数

CSS

使用 mini-CSS-extract 插件与 postCSS 在前端开发中是非常常见的。mini-CSS-extract 插件可以将 CSS 代码从打包生成的 JavaScript 文件中提取出来，使得 CSS 与 JavaScript 可以分开加载，从而提高页面加载速度。而 postCSS 则是一个用 JavaScript 编写的 CSS 处理工具，可以通过插件来处理 CSS，并且可以与 webpack 配合使用。

在使用 mini-CSS-extract 插件与 postCSS 的过程中，有时会遇到错误提示 "this.getOptions is not a function"。这个错误通常是由于在配置文件中没有正确使用 postCSS-loader 的 options 参数导致的。为了解决这个问题，我们需要对 webpack 的配置文件做一些调整。

首先，我们需要在 webpack 的配置文件中引入 mini-CSS-extract 和 postCSS 相关的模块。可以使用 npm 或 yarn 来安装这些模块：

shell
npm install mini-CSS-extract-plugin postCSS-loader

接下来，在 webpack 的配置文件中，我们需要设置 module.rules，将 CSS 文件与相应的 loader 关联起来。这里我们需要使用 mini-CSS-extract-plugin 的 loader，同时也需要使用 postCSS-loader。

Javascript
const MiniCSSExtractPlugin = require('mini-CSS-extract-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.CSS$/,
        use: [
          MiniCSSExtractPlugin.loader,
          'CSS-loader',
          'postCSS-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCSSExtractPlugin(),
  ],
};

在上述代码中，我们使用了 MiniCSSExtractPlugin.loader 来提取 CSS 代码，并将其与 CSS-loader 和 postCSS-loader 链接使用 postCSS-loader 来处理 CSS。同时，我们在 plugins 中实例化了 MiniCSSExtractPlugin。

现在，我们需要在项目的根目录下创建 postCSS.config.JS 文件，并在其中配置 postCSS 的插件。这里以 autoprefixer 插件为例：

Javascript
module.exports = {
  plugins: [
    require('autoprefixer'),
  ],
};

在上述代码中，我们使用 require 来引入 autoprefixer 插件。

完成以上配置后，重新运行 webpack，应该就不再出现 "this.getOptions is not a function" 的错误了。

：

通过使用 mini-CSS-extract 插件与 postCSS，我们可以将 CSS 代码从 JavaScript 文件中提取出来，并使用 postCSS 进行处理。这样可以提高页面加载速度，并且使得 CSS 代码更加易于维护。在配置过程中，我们需要注意正确设置 postCSS-loader 的 options 参数，避免出现 "this.getOptions is not a function" 的错误。

以上就是使用 mini-CSS-extract 插件与 postCSS 的简单介绍和配置方法。希望对你有所帮助！