如何通过postCSS从库中导入css

Question

我正在使用这个名为Flickity的幻灯片库，该库需要使用其css文件flickity.min.css。在我的项目中，我使用postCSS，当将这个flickity.min.css包含到我的组件css中时，比如：

@import ./lib/flickity.min

它的类以以下方式加前缀：MyComponent__flickity-class_35aw的问题是flickity创建了新的dom元素并依赖于它的类，所以在检查器中，它的类将是.flickity-class，因此没有样式应用于它，我正在努力找出如何正确地包含它。

使用react+webpack设置

Answer 1

看起来您正在将CSS导入为CSS模块。如果你不打算使用CSS模块，你只需要从你的webpack配置中删除"模块"，即

loaders: [
    {
        test: /.css$/,
        loaders: 'style!css?modules'
    }
]

应该变成：

loaders: [
    {
        test: /.css$/,
        loaders: 'style!css'
    }
]

然而，如果你想对一些文件使用CSS模块，而不是其他文件，我建议你根据适当的启发式方法定义多个CSS加载程序配置，例如，假设你的/lib/目录只包含"全局"CSS，你可以这样做：

loaders: [
    {
        test: /.css$/,
        exclude: /lib/,
        loaders: 'style!css?modules'   
    },
    {
        test: /.css$/,
        include: /lib/,
        loaders: 'style!css'
    }
]