CSS 在 REACT 中加载失败

Question

我在反应中加载 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 会抛出错误。

CSS 在 REACT 中加载失败

CSS load failed in REACT

require

webpack