当我在 head 中导入时，React css import 在 cad 中不起作用答案

【问题标题】：React css import not working in cdn when i am imporing in head当我在 head 中导入时，React css import 在 cad 中不起作用
【发布时间】：2020-05-02 11:23:56
【问题描述】：

<html>
  <head>
    <link rel="stylesheet" type="text/css"  href="./styles.css"  />
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
    <script type="text/babel">
      class Home extends React.Component {
        render() {
          return (
            <div>
              <img src="bg.jpeg" alt="Snow" style={{ width:'100% ', height:'672px' }}/>
              <div class="centered" style={{ background: '#1E1721', padding: '2cm', borderRadius: '5px' }}>
                <img src="logo.png" style={{ width:'200px',marginBottom:'2cm' }} />
                <a href="inventories.html">
                  <p style={{ color:'#fff', textAlign:'center' }}>
                    Электронный каталог
                  </p>
                </a>
                <a href="standards.html">
                  <p style={{ color:'#fff',textAlign:'center' }}>
                    Нормативы
                  </p>
                </a>
              </div>
            </div>  
          );
        }
      }

      ReactDOM.render(
        <Home />,
        document.getElementById('root')
      );
    </script>
  </body>
</html>

嗨，我在这里尝试在 react.js 中使用 cdn，但我有一个 css 文件名 styles.css 。我已将它添加到我的 head 标签中。

但它没有对我的应用应用任何样式。

如果我使用 bootstrap cdn 链接，它的工作方式相同。

我的 css 导入错误吗？但我可以在查看源代码中看到我的 css。

请看一下

【问题讨论】：

为什么要在 html 文件中添加 jsx？并在正文底部添加脚本
无论如何我只需要这个工作。你能告诉我如何让 css 工作吗？

标签： css reactjs

【解决方案1】：

public 文件夹允许在模块系统之外添加资产。但是，如果您将文件放入 public 文件夹，它将不会被 Webpack 处理。相反，它将被原封不动地复制到构建文件夹中。要引用public 文件夹中的资产，您需要使用名为PUBLIC_URL 的环境变量。

考虑到这一点，也许您可以尝试将 <link> 标记更改为以下内容：

<link rel="stylesheet" type="text/css"  href="%PUBLIC_URL%/styles.css"  />

有关更多信息，请查看documentation 以了解如何使用public 文件夹。

希望对您有所帮助！

【讨论】：

我只需要我的线路和你的线路吗？
是的，将您的链接引用更改为我放置的内容，然后根据需要重新构建您的项目。
我做了但仍然没有工作。在 viewsource 中显示但未应用的样式
你重建你的项目了吗？如果是这样，环境变量将被适当地替换。如果您在开发模式下运行，请将链接替换为以下内容：<link rel="stylesheet" type="text/css" href="/styles.css" />
我只使用一个html和一个css文件。我无法建造。我正在通过刷新页面进行检查

【解决方案2】：

用 className 替换 class 就可以了。我错过了那个

【讨论】：