如何通过 postCSS 从库中导入 CSS？答案

【问题标题】：How to import css from libraries via postCSS?如何通过 postCSS 从库中导入 CSS？
【发布时间】：2016-05-10 13:50:22
【问题描述】：

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

@import ./lib/flickity.min

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

使用 react + webpack 设置

【问题讨论】：

标签： javascript css webpack postcss flickity

【解决方案1】：

您似乎将 CSS 导入为 CSS Modules。如果您不打算使用 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'
    }
]

【讨论】：