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 Modules。如果您不打算使用CSS模块，则只需删除“模块”即可。来自你的webpack配置，即

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

应该成为：

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

但是，如果您想为某些文件使用CSS模块而不是其他文件，我建议您根据适当的启发式定义多个CSS加载程序配置，例如：假设您的/ lib /目录只包含＆＃39; global＆＃39; CSS你可以这样做：

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

如何通过postCSS从库中导入css？

1 个答案: