2

我正在将此库用于名为Flickity的幻灯片，需要使用其 css 文件flickity.min.css。在我的项目中，我使用 postCSS 并将其包含flickity.min.css到我的组件 css 中，例如：

@import ./lib/flickity.min

它的类以下列方式获得前缀：MyComponent__flickity-class_35aw这个问题是 flickity 创建新的 dom 元素并依赖于它的类，所以在检查器中，它的类将是.flickity-class因此没有样式应用于它，我试图弄清楚如何正确地包括它。

使用 react + webpack 设置

4

1 回答 1

3

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

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

应该变成：

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

但是，如果您想对某些文件使用 CSS 模块而不对其他文件使用 CSS 模块，我建议您根据适当的启发式定义多个 CSS 加载器配置，例如假设您的 /lib/ 目录将只包含“全局”CSS，您可以这样做：

loaders: [
    {
        test: /\.css$/,
        exclude: /lib/,
        loaders: 'style!css?modules'   
    },
    {
        test: /\.css$/,
        include: /lib/,
        loaders: 'style!css'
    }
]
于 2016-05-10T14:12:55.870 回答