如何应用 `postcss-import` 配置的插件答案

【问题标题】：How are `postcss-import` configured plugins applied如何应用 `postcss-import` 配置的插件
【发布时间】：2016-07-30 07:28:52
【问题描述】：

我刚刚开始在 Webpack 中专门使用 PostCSS。当使用postcss-import 内联外部样式表时，我看到它的选项允许我们配置插件和转换器以应用于导入的源，但我对它如何与为主要 PostCSS 运行器配置的其他选项配合使用有点困惑.

例如，如果我想内联 URL，我应该将 postcss-url 插件添加到 postcss-import、PostCSS 运行器还是两者都添加（如果我的主样式表也有 URL 引用）？

【问题讨论】：

标签： css webpack postcss

【解决方案1】：

当你在 webpack 中为 postcss 定义插件时，建议将 postcss-import 设为列表中的第一个插件。由于postcss-import 只是将@import 内联到文件的开头，因此之后定义的任何postcss 插件都将应用于它。

例子：

（例如，我假设您使用 postcss.config.js 文件，如果您为 webpack 1 格式的插件使用数组，则同样的逻辑适用）

// Header.css
@import 'button.css';

.foo {
    font-size: 3rem;
    transform:translateY(-10px);
}

// Button.css

.bar {
   transform:translateX(20px);
}

如果导入插件在 autoprefixer 之后，它会先在文件上应用 autoprefixer 插件，然后再导入 @import 文件。所以当文件被导入时，前缀已经发生了，输出将是：

// postcss.config.js
module.exports = {
  plugins: {
    'autoprefixer': {},
    'postcss-import': {}
  },
};

// output.css
.bar {
    transform: translateX(20px); // Prefixing hasn't happened on the imported file
}
.foo {
    font-size: 3rem;
    transform:translateY(-10px);
    -webkit-transform:translateY(-10px); // original file has been prefixed though
}

如果你先导入，它会内联导入的文件，然后进行自动前缀，这意味着导入的文件和原始文件都会自动添加前缀：

// postcss.config.js
    module.exports = {
      plugins: {
        'postcss-import': {},
        'autoprefixer': {}
      },
    };

// output.css
.bar {
    transform: translateX(20px);
    -webkit-transform:translateX(20px); // Also prefixed now

}
.foo {
    font-size: 3rem;
    transform:translateY(-10px);
    -webkit-transform:translateY(-10px); 
}

因此这意味着您实际上不必在 postcss-import 插件的选项中再次添加插件。

【讨论】：