Closed mihaiblaga89 closed 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
@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.
I'm guessing this is for global import, and it's only working with the style already present in webpack-assets, right?
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.
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>" />
...
i've solved the __hash with the custom css loader from webpack/dev.config.js. I'll try this option later today. Thanks
closing this for now. feel free to open it if you have further information or discussions.
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