在React中使用Webpack导入CSS

Question

我之前使用AngularJS，现在开始学习React。虽然Angular 1.x是基于组件的，但仍然有模板(template)的概念。在React中，文件结构和前端编码方式已经改变，例如将文件按组件拆分而不是按页面拆分。这鼓励代码的可重用性，但这是否意味着我们应该改变如何应用CSS呢？

我在navBar.jsx中看到了这个import { navBar } from 'styles/navbar.css'。嗯，CSS是如何与JSX一起工作的呢？这个navBar CSS文件会被加载吗？需要哪些webpack插件？它们是默认安装的吗？我使用Facebook的react-create-app，所以不太熟悉配置。

- Nately Jamerson

Answer 1

你可以使用 css-loader 和 style-loader 将 CSS 文件包含在你的 webpack bundle 中。默认情况下，它会生成一些 JavaScript 代码，创建一个 style 元素，并将导入的 CSS 文件的内容附加到 head 元素中的 index.html。

因此，你肯定可以使用外部 CSS 文件来为你的 React 组件设置样式，只需确保每个 CSS 类都有适当的名称空间，以避免与其他组件的类命名冲突。

例如，你可以采用 BEM 命名方案。如果你的组件名为 NavBar，那么该组件的根元素可能具有 x-nav-bar 的 className（x 前缀是为了避免与像 bootstrap 这样的框架发生冲突），如果需要为所有子元素设置样式，则其类名将为 x-nav-bar__${childName}。

- Assan

---

css-loader 导入 CSS 文件及其依赖项（例如 url 引用），并生成一个 CSS 字符串，然后在打包应用程序时，style-loader 将该字符串注入到您的 index.html 中。如果您的 CSS 没有引用其他资源，则可以使用 raw-loader 替代 css-loader。但是，如果您希望样式被注入到 DOM 中，则需要使用 style-loader。 - Assan

“如果你的CSS没有引用其他资源”，这是什么意思？ - Nately Jamerson

当然我在我的CSS中使用URL，raw-loader有什么意义呢？我看不出来编写禁止使用图像路径的CSS的用例。如果我没有使用css-loader而单独使用styler-loader会发生什么？如果它们相互依赖，它们不能只是在包中吗？ - Nately Jamerson

嗯，这是一个不同的问题。我建议查看文档。忘记关于CSS的raw-loader吧，我只是提到它来强调css-loader的作用。 - Assan

这里是关于Webpack中style-loader和css-loader的比较。 - Assan

Answer 2

这种形式的 import { navBar } from 'styles/navbar.css' 与 JSX 无关，而是与 css-loader 相关。这是一个处理 CSS 的 webpack 加载器，它支持 cssModules，可以封装选择器名称以避免 CSS 泄漏。

简而言之，该导入公开了一个对象，其中包含您的选择器到唯一字符串（通常是哈希）的映射。

例如：

// styles.css
.foo {
   color: red;
}

.bar {
   color: green;
}


// Component.jsx
import styles from './styles.css';

console.log(styles);
/* This will print something like
{
  foo: '_h234jh',
  bar: '_234m23'
} 
*/

- felixmosh