我来自 angularjs，现在开始反应。即使我使用的 Angular 1.x 已经是基于组件的，但它仍然有模板。但是在反应文件结构和我们用于编写前端代码的方式已经改变，就像不是按页面吐出文件，你现在按组件制作文件。它促进了可重用性，但这是否意味着我们应用 css 的方式也发生了变化？
我在 navBar.jsx 中看到了这个 import { navBar } from 'styles/navbar.css'。嗯 css 如何与 JSX 一起工作？ navBar css 是否加载该文件？为此需要什么 webpack 插件？它来自默认值吗？我正在使用 facebook 的 react-create-app，所以我对配置不太了解。
【问题讨论】：
标签： javascript css angularjs reactjs webpack
您使用 css-loader 和 style-loader 在 webpack 包中包含 CSS 文件。默认情况下，它会生成一些 JavaScript 代码，使用导入的 CSS 文件的内容创建一个 style 元素，并将其附加到 index.html 中的 head 元素。
所以你绝对可以使用外部 CSS 文件来设置你的 React 组件的样式，只要确保每个 CSS 类都有正确的命名空间，以避免与其他组件的类发生命名冲突。
例如，您可以采用BEM 命名方案。如果您的组件被称为NavBar，那么该组件的根元素可能具有className 或x-nav-bar（x 前缀是为了避免与引导程序等框架发生冲突）和所有子元素，如果它们需要设置样式，然后将具有 x-nav-bar__${childName} 之类的类名。
【讨论】：
css-loader 导入 CSS 文件及其所有依赖项（例如 url 引用），并生成一个 CSS 字符串，style-loader 然后在您捆绑时将该字符串注入您的 index.html你的应用程序。如果您的 CSS 没有对其他资源的任何引用，那么您可以使用 raw-loader 而不是 css-loader。但是如果你想将样式注入到 DOM 中，style-loader 是必需的。
import 语句，或者通过 url 包含图像或字体文件，例如：background-image: url('./image.png');。如果你使用css-loader，那么 webpack 会自动在你的包中包含引用的图像。 raw-loader 不这样做，它会将 CSS 视为纯文本，因此不会解析引用。
这种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'
}
*/
【讨论】：