将 normalize.css 添加到 reactjs

Posted 2023-02-22

【中文标题】将 normalize.css 添加到 reactjs

【英文标题】：Add normalize.css to reactjs

【发布时间】：2017-04-25 13:30:33

【问题描述】：

这可能是一个基本问题，但我对 react 和 webpack 真的很陌生。 如何添加 normalize.css 和 css 框架？ 我不想使用引导程序，而是找到了一个名为 concise css 的轻量级 css 框架。我想使用它，因为我主要关注元素的定位和格式，并且对我的样式有更大的灵活性。

我已经安装了 css-loader 和 styles-loader。 我读过你可以通过使用将样式加载到组件中

require("./path/to/css")

但是，我仍然对此感到困惑。

【问题讨论】：

推荐阅读：blog.andrewray.me/webpack-when-to-use-and-why

非常感谢。我现在明白了。

【参考方案1】：

您可以将 require("./path/to/css") 放在 index.js 或任何其他*** React 组件中。它将被捆绑在您的 web 包中，用于所有子组件。

确保您已在 package.json 文件中安装了加载器，并且您的 webpack.config.js 文件调用了加载器。完成此操作的准系统 webpack.config.js 文件可能如下所示：

module.exports = 
  entry: [
    './app/index.js'
  ],
  output: 
    filename: 'bundle.js'
  ,
  module: 
    loaders: [
      test: /\.css$/, loader: 'style-loader!css-loader'
    ]
  

【参考方案2】：

进一步阅读后，我意识到 normalize.css 是非常静态的，而 webpack 可以处理更多动态文件。

因此，我刚刚获得了 normalize.css 的 CDN 并使用了语义 UI 反应

【讨论】：

Webpack 应该知道你所有的静态 CSS 文件。除非有特定原因，否则不应从 CDN 加载任何内容。