How to import css from libraries via postCSS?


Tags: javascript,css,webpack,postcss,flickity

Problem :

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



Solution :

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'
    }
]

    CSS Howto..

    CKEditor 4: How to add CSS stylesheet from plugin?

    How can I fix this jumbotron/carousel to be the size of the image?

    How to style form submit button in CSS?

    How to load CSS into CodeIgniter

    how to create multiple instance of a css class?

    How do I disable position:fixed in web pages?

    How to elasticity of the char length in javascript or css? [duplicate]

    how to decrease the height of content area for with css?

    How to use Aural CSS?

    How to remove rounded from to select query in jquery?

    How to make this grey kind of background with css?

    How do you create and run an html page directly from LocalStorage?

    jqueryui menu's submenu — how to keep in front

    How to add new line in a Bootstrap button using CSS

    How to stretch images with no antialiasing

    CSS: How to say .class:last-of-type [classes, not elements!] [duplicate]

    How to print data from left to right in html using css

    How change css of disabled input checkbox tag?..because it's too light and hard to see

    How to replace @media (max-width) using Stylish or Greasemonkey?

    How to reuse a css background sprite for icons of different sizes?

    how can assign left of div to left of screen when margin set to auto?

    How to make a css navigation menu “selected” option still clickable

    how can i position text to either side of an image in html5

    How to get multiple rotating background cover with css / Full screen slideshow

    How to make CSS menu bar activated only after my mouse cursor is at the menu.

    How can I create a searchbar like this?

    How to positioning an element over another in CSS

    How to mask an SVG within a div?

    How to set css styles with variables in rails if certain item is selected?

    How to grab the element with certain CSS property value inline