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

Question

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

@import ./lib/flickity.min

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

使用 react + webpack 设置

Answer 1

您似乎将 CSS 导入为 CSS Modules。如果你不打算使用 CSS 模块，你只需要从你的 webpack 配置中删除 'modules'，即

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

应该变成：

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

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

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

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

How to import css from libraries via postCSS?

javascript

css

webpack

postcss

flickity