CRA - 使用动态 CSS 导入反应生产构建

Question

The issue:

Using the out-of-the-box react-scripts package included with create-react-app to build a production build of React, dynamically imported CSS files get ignored and instead all CSS seems to get compiled into the production build.

Example of what is happening:

/* styles/desktop.css */
.some-class {
  background-color: white;
  margin: 0;
}

/* styles/mobile.css */
.some-class {
  border: 1px solid black;
  margin: 1em;
}
.another-class {
  background-color: black;
  padding: 3px;
}

Note we are using require() with template strings as the import statement only accepts string literals and cssEnv could be any number of things which would make a conditional statement untenable.

/* config.js */
const cssEnv = 'desktop';
require(`./styles/${cssEnv}.css`);

We build our production build.

$ npm run build

In the build folder, we find our compiled CSS. Note how all our CSS files have been compiled into one (including even CSS we never imported).

/* compiledCSS.chunk.css */
.some-class {
  background-color: white;
  border: 1px solid black;
  margin: 0;
}
.another-class {
  background-color: black;
  padding: 3px;
}

A similar SO question I found in Googling for a solution:

react-scripts build ignores conditional css imports

Answer 1

I'm immediately answering my own question because I've already solved it, but also because I had a bit of a Homer Simpson "d'oh!" moment when I finally found the solution after scouring Google and documentation far and wide. This is why I posted the question, in hopes of saving other people that time searching for a solution that wasn't super obvious (and doesn't seem to be addressed anywhere that I have found).

So I didn't realize that the import statement had a dynamic importing functionality via import(). So the solution was simply to replace require() with import().

/* config.js */
const cssEnv = 'desktop';
import(`./styles/${cssEnv}.css`);

Now when we build our production build, we get the correct compiled CSS

/* compiledCSS.chunk.css */
.some-class {
  background-color: white;
  margin: 0;
}

So my best guess as to what is happening is that react-scripts treats require() differently than import(), where providing a template string with variables to require() causes the variables to act like wildcards (*). So when we were building the production build earlier,

require(`./styles/${cssEnv}.css`);

got treated like

require(`./styles/*.css`);

Hence all css files in the styles folder were compiled together.

I'm not entirely sure of the intimate inner workings of what is happening here, so I wouldn't mind getting input from folks like Dan Abramov and others who might better understand what exactly is happening to clarify this.