在 REACT 中 CSS 加载失败

Question

在 react 中加载 CSS 时遇到问题。

我的源代码是这样的。

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

当我使用字符串 url 加载 css 时，它可以正常工作。 但是当我将 css 作为变量加载时，它就无法工作了。

错误日志是这样的。

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

而Console.log是这样的。

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

我想使用 url 作为变量。有什么解决办法吗？

谢谢。

Answer 1

Webpack 无法知道变量的值是什么，因此无法编译文件。

你应该清楚地定义路径，否则 webpack 会抛出错误。