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

我刚刚开始使用PostCSS专门用于Webpack。当使用postcss-import来内联外部样式表时，我发现它的选项允许我们配置插件和变换器以应用于导入的源代码，但是我对如何将这与适用于主要PostCSS运行器的其他选项配合在一起感到有些困惑。如何应用`postcss-import`配置的插件

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

来源

2016-07-30 Filip Dupanović

当您定义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 
}

如果你把进口第一，虽然，它会内联导入的文件，然后执行autoprefixing，这意味着这两个进口和原始文件将被autoprefixed：

// 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插件的选项重新添加插件。

来源

2017-03-02 01:37:14

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

回答

相关问题