Question

我刚开始使用PostCSS专门使用Webpack。当使用postcss-import内联外部样式表时，我看到它的选项允许我们配置插件和变换器以应用于导入的源，但我对它如何与其他源一起使用感到困惑。为主PostCSS跑步者配置的选项。

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

Answer 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插件的选项中再次添加插件。

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

1 个答案: