isomorphic-style-loader icon indicating copy to clipboard operation
isomorphic-style-loader copied to clipboard

How to use isomorphic-style-loader with third party component library?

Open dmngu9 opened this issue 5 years ago • 3 comments

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?

dmngu9 avatar May 01 '19 11:05 dmngu9

I'm also looking for a solution to this.

nickinnon avatar May 01 '19 19:05 nickinnon

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.

nickinnon avatar May 06 '19 18:05 nickinnon

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.

piglovesyou avatar May 26 '19 00:05 piglovesyou