Search code examples
webpackrequire

CSS load failed in REACT

I have a problem when loading CSS in react.

My source code is like this.

const Index = ({ .... }) => {
...
   useEffect(() => {
   ...
      console.log('data : ', data);
      // require('#a/b/c/d/e.css');
      require(data.src);

When I load the css using string url, It works properly. But when I load the css as variable, it can not work.

Error log is like this.

Cannot find module '#a/b/c/d/e.css'
webpackEmptyContext
webpack:~ sync:2

and Console.log is like this.

data :  
{key: "9999", src: "#a/b/c/d/e.css"}
key: "9999"
src: "#a/b/c/d/e.css"

I want to use url as variable. Is there any solution about this?

Thanks.

Solution

  • Webpack has no way of knowing what the value of the variable is, so it cannot compile the file.

    You should define the path clearly or webpack will throw errors.