问使用react中的webpack导入css

EN

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

所以你绝对可以使用外部CSS文件来样式化你的React组件，只需确保每个CSS类都有正确的命名空间，以避免与其他组件的类的命名冲突。

例如，您可以采用BEM命名方案。如果您的组件名为NavBar，则该组件的根元素的className可能为x-nav-bar ( x前缀是为了避免与bootstrap之类的框架冲突)，如果需要设置样式，所有子元素都将具有类似x-nav-bar__${childName}的类名。

这种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'
} 
*/