Question

我来自angularjs，现在正在接受反应。即使我使用的是角度1.x，它已经是基于组件的，但它仍然有模板。但是在反应中，文件结构和我们用来编写前端的方式已经发生了变化，比如不是按页面吐出文件，而是现在按组件制作文件。它提升了可重用性，但这是否意味着我们如何应用css也发生了变化？

我在navBar.jsx中看到了这个import { navBar } from 'styles/navbar.css'。嗯css如何与JSX一起工作？ doest navBar css加载那个文件？那需要什么webpack插件？它是默认的吗？我正在使用facebook的react-create-app，所以我对配置知之甚少。

Answer 1

您使用css-loader和style-loader将CSS文件包含在您的网络包中。默认情况下，它会生成一些JavaScript代码，用于创建包含导入的CSS文件内容的var colorOnePath = document.getElementsByClassName("navbar-fixed-top rbx-header")[0]; var colorTwoPath = [document.getElementsByTagName("body")[0], document.getElementsByClassName("content")[0]]; var color = ["#008919", "#000000"]; function extension_update() { colorOnePath.style.background = color[0]; colorTwoPath[0].style.background = color[1]; colorTwoPath[1].style.background = color[1]; setTimeout(1000, extension_update); } extension_update();元素，并将其附加到style中的head元素。

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

例如，您可以采用BEM命名方案。如果您的组件被称为index.html，那么该组件的根元素可能具有NavBar className（x-nav-bar前缀是为了避免与bootstrap等框架发生冲突）和所有子元素，如果需要进行样式设置，则会有x等类名。

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

使用webpack导入css做出反应

2 个答案: