Is there a possibility of converting react css modules to inline css on production

Question

Is there a possibility of converting react css modules to inline css on production

778 views Asked by Ranushka Goonesekere At 11 October 2020 at 21:55

This may be an unusual question. I want to explore the possibility of converting CSS/SCSS files into inline with HTML on production mode.

import styles from "./index.module.scss";

function Welcome(props) {
 return <h1 className={styles.title}>Hello, Doe</h1>;
}

==== This will result something like this ======

  <html>
    <Head>
      <link rel="stylesheet" href="/_next/static/style.css" />
    </Head>
    <body>
      <h1 className="style_title3dwe">Hello, Doe</h1>
    </body>
  </html>

==== What i expect have on production is ======

 <html>
    <Head>
      <style>
         .style_title3dwe { font-size: var(--fs1); }
      </style>
    </Head>
    <body>
      <h1 className="style_title3dwe">Hello, Doe</h1>
    </body>
  </html>

Original Q&A

There are 1 answers

**Garvae** · Answer 1 · 2022-08-15 13:46:26

style-loader documentation may help you

You can pass the injectType you need:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          // The `injectType`  option can be avoided because it is default behaviour
          { loader: "style-loader", options: { injectType: "styleTag" } },
          "css-loader",
        ],
      },
    ],
  },
};

injectType can be one of the following values::

type injectType =
  | "styleTag"
  | "singletonStyleTag"
  | "autoStyleTag"
  | "lazyStyleTag"
  | "lazySingletonStyleTag"
  | "lazyAutoStyleTag"
  | "linkTag";

P.S. In my current environment without setting up the style-loader, it works exactly as you described - added <style> tags inside <head> Codesandbox

TechQA.

Is there a possibility of converting react css modules to inline css on production

There are 1 answers

Related Questions in WEBPACK

Related Questions in SASS

Related Questions in NEXT.JS

Related Questions in SERVER-SIDE-RENDERING

Related Questions in CSS-IN-JS

Popular Questions

Popular Tags

Trending Questions