使用react中的webpack导入css
我来自angularjs，现在正在学习react。即使我使用的是angular 1.x，它已经是基于组件的，但它仍然有模板。但在react中，文件结构和我们用来编写前端代码的方式发生了变化，比如，你现在不再是按页打印文件，而是按组件创建文件。它促进了可重用性，但这是否意味着我们应用css的方式也改变了？
我在navBar.jsx中看到了这个import { navBar } from 'styles/navbar.css'。嗯，css和JSX是如何协同工作的？navBar css是否加载该文件？这需要什么样的webpack插件呢？它是来自默认的吗？我使用的是facebook的react-create-app，所以我不太了解config。
回答 2
Stack Overflow用户
发布于 2017-01-18 11:23:40
您可以使用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}的类名。
Stack Overflow用户
发布于 2019-02-03 03:49:40
这种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'
}
*/https://stackoverflow.com/questions/41710792
复制相似问题
腾讯云开发者
