search

xkawi / react-universal-saga

Universal React Starter Kit ft. Redux Saga
https://react-universal-saga.herokuapp.com
MIT License
186 stars 33 forks source link

Postcss adds class suffix to imported css files #16

Closed mihaiblaga89 closed 7 years ago

mihaiblaga89 commented 7 years ago

Hello,

I've imported a css file from a node module (react-activity) and Postcss or style-loader, or some other processor adds ___[chars] to classes and they do not match the classes added by the module.

Any idea on how to prevent that? I've added another loader that should fix the issue(according to an issue on Postcss) but it does not loaders: [ { test: /(node_modules)(\/.*css$)/, loader: 'style!css?sourceMap!postcss' },

As of importing it, i'm importing in App.scss file like this @import '../../../node_modules/react-activity/dist/react-activity.css';

Thank you, Mihai

mihaiblaga89 commented 7 years ago

Finally got it working:

App.js import '../../../node_modules/react-activity/dist/react-activity.css';

webpack-isomorphic-tools.js style_modules: { extensions: ['less','scss','css'],

webpack/dev.config.js module: { loaders: [ { test: /(node_modules)(\/.*css$)/, loader: 'style!css?sourceMap!postcss' },

Now it's working, the style is present in webpack-assets.json. Is this the proper way to do it?

Thanks, Mihai

xkawi commented 7 years ago

@mihaiblaga89 Not sure if it's the "proper" way, but I guess so long it works for you, should be fine. :smile:

Maybe, could you try another approach where you just import the css inside src/theme/style.scss like this?

// src/theme/style.scss
...
@import '~react-activity/dist/react-activity.css';
...

Let me know if this approach works too.

mihaiblaga89 commented 7 years ago

I'm guessing this is for global import, and it's only working with the style already present in webpack-assets, right?

mihaiblaga89 commented 7 years ago

Nope, it doesn't. As soon as I take it out from App.js it disappears from webpack-assets and style.scss can't find it.

xkawi commented 7 years ago

how about importing it inside src/theme/bootstrap.override.scss file?

think importing the module's css file within bootstrap.override.scss would simply include the module's specific styles into your app's css bundle as it is (global style). Otherwise, I suspect, webpack would build/transform react-activity.css (e.g. changing the classname) into your app's css bundle, which would result in different __[chars|hash] that you experienced earlier.

if this approach works, you don't need to include/require it within your App.js anymore, also no modification to your webpack or isomorphic tools config. You can use the class name as it is.

or, another approach would be to include react-activity.css as global stylesheet like so:

// src/helpers/Html.js
...
<head>
    <link rel="stylesheet" href="<location of react-activity.css>" />
...
mihaiblaga89 commented 7 years ago

i've solved the __hash with the custom css loader from webpack/dev.config.js. I'll try this option later today. Thanks

xkawi commented 7 years ago

closing this for now. feel free to open it if you have further information or discussions.