How to import css from libraries via postCSS?

Question

I am using this library for slideshows called Flickity that requires to use its css file flickity.min.css. In my project I use postCSS and when including this flickity.min.css into my components css like:

@import ./lib/flickity.min

its classes get prefixed in the following way: MyComponent__flickity-class_35aw issue with this is that flickity creates new dom elements and relies on its classes, so in inspector the class for it would be .flickity-class hence no styles are applied to it, I'm trying to figure out how to include it correctly.

Using react + webpack setup

score 3 · Accepted Answer · answered May 10 '16 at 14:12

It looks like you're importing the CSS as CSS Modules. If you didn't intend to use CSS Modules you just need to remove 'modules' from your webpack config, i.e.

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

Should just become:

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

If however you want to use CSS modules for some files but not others I would recommend defining multiple CSS loader configs based on an appropriate heuristic, e.g. assuming your /lib/ directory will only ever contain 'global' CSS you could do this:

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

How to import css from libraries via postCSS?

1 Answers1