kriasoft / isomorphic-style-loader

CSS style loader for Webpack that is optimized for isomorphic (universal) web apps.

Home Page:https://reactstarter.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

How to import root style without prefix?

digz6666 opened this issue · comments

I'm trying to import root style into my client side index.js file. how can I do that?

Following index.less file is not loaded or added to my dom.

...
import './index.less';
...

const insertCss = (...styles) => {
  const removeCss = styles.map(style => style._insertCss());
  return () => removeCss.forEach(dispose => dispose());
};

ReactDOM.render(
  <StyleContext.Provider value={{ insertCss }}>
    <Router>{renderRoutes(Routes)}</Router>
  </StyleContext.Provider>,
  document.getElementById('root')
);

Example project is here: https://github.com/digz6666/webpack-loader-test/tree/ssr-2

If you only would like to load a single .less file you might not need isomorphic-style-loader but you just can write <link rel="stylesheet" href="index.css"> in your <head> to load your compiled .less .

If you still would like to use isomorphic-style-loader you can try this in both client-side and server-side entry points:

import s from './index.less';
//...
insertCss(s);

In order not to put prefix, pleaser refer to css-loader options.

@piglovesyou Thank you. importCss(s) resolved my problem.

Nice to hear that.