使用的WebPack进口的CSS在反应

Question

我是从angularjs，现在拿起反应。连我自己都采用了棱角分明的1.x这已经是基于组件的，但它仍然有模板。但在反应的文件结构，我们用它来编写前端的方式发生了变化，如，而不是由网页吐涎文件，U现在做的组件文件。它促进重用但这是否意味着我们如何运用CSS也发生了变化？

我看到这个import { navBar } from 'styles/navbar.css'在navBar.jsx。嗯，如何与JSX CSS的工作在一起吗？行的事导航栏CSS加载该文件？是需要什么的WebPack插件？它来自默认？我使用的反应创建应用程序内被Facebook，所以我不知道很多关于配置。

Answer 1

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

所以，你绝对可以使用外部CSS文件风格你反应的组分，只要确保每一个CSS类是正确命名空间，避免名称冲突与其它组件的类。

例如，你可以采用BEM命名方案。如果您的组件被称为NavBar，那么该组件的根元素可能有className的x-nav-bar（该x前缀是存在的，以避免像引导框架冲突），并且所有子元素，如果他们需要的风格，届时将有类的名称，如x-nav-bar__${childName}。

Answer 2

这种import { navBar } from 'styles/navbar.css'是不相关的JSX但css-loader。这是一个的WebPack加载器处理CSS，它支持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'
} 
*/