isomorphic-style-loader
isomorphic-style-loader copied to clipboard
How to use isomorphic-style-loader with third party component library?
In my webpack config I include isomorphic-style-loader and the third party component comprise of js and scss file. When i ran webpack, the styles of the third party component is not loaded in the head tag in the HTML sent from server
My question is do i need to wrap that component with withStyles with its own stylesheet?
I'm also looking for a solution to this.
I ended up creating another style sheet that imported the vendor styles. The component followed a standard classes API that allowed me to inject the class names that were generated from the import.
In isomorphic-style-loader
you need to insertCss
explicitly somewhere. If the third party component provides .scss
why don't you try this
import {ThirtPartyComp} from 'third-party-comp';
import thirdPartyCompStyle from 'third-party-comp/lib/style.scss';
import s from './your-style.scss';
const YourComponent = () => (
<div>
<ThirtPartyComp />
<div>
);
export default withStyles(thirdPartyCompStyle, s)(YourComponent);
Please note that you probably need !css-loader?modules=false
loader option of Webpack.