您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　4.5.5 样式

　　我们终于完成了Todo应用，在浏览器中可以看到最终效果，如图4-1所示。

　　图4-1 无定制样式的Todo应用界面

　　这个Todo应用功能已经完成，但是并没有定制样式，还是需要通过CSS来添加样式。我们在定义视图部分代码时，一些元素上通过className属性添加了CSS类，现在我们就利用这些类来定义CSS规则。

　　在src/todos/views/style.css中，我们定义了Todo空间中所有的样式，为了让定义的样式产生效果，在Todos组件的最顶层视图文件src/todos/views/todos.js中添加下列代码：

　　import './style.css';

　　在React应用中，通常使用webpack来完成对JavaScript的打包，create-react-app产生的应用也不例外，不过webpack不只能够处理JavaScript文件，它能够处理CSS、SCSS甚至图片文件，因为在webpack眼里，一切文件都是“模块”，通过文件中的import语句或者require函数调用就可以找到文件之间的使用关系，只要被import就会被纳入最终打包的文件中，即使被import的是一个CSS文件。

　　如图4-2所示，Todo应用终于拥有样式了。

　　图4-2 完成定制样式的Todo应用界面

　　把CSS文件用import语句导入，webpack默认的处理方式是将CSS文件的内容嵌入最终的打包文件bundle.js中，这毫无疑问会让打包文件变得更大，但是应用所有的逻辑都被包含在一个文件中了，便于部署。

　　当然，如果不希望将CSS和JavaScript混在一起，也可以在webpack中通过配置完成，在webpack的loader中使用extract-text-webpack-plugin，就可以让CSS文件在build时被放在独立的CSS文件中，在第11章会介绍定制webpack配置的方法。

　　有意思的是，选择CSS和JavaScript打包在一起还是分开打包，和代码怎么写没有任何关系，这就是React的妙处。代码中只需要描述“想要什么”，至于最终“怎么做”，可以通过配置webpack获得多重选择。

　　如果使用SCSS语法，可以简化上面的样式代码，但是create-react-app产生的应用默认不支持SCSS，有兴趣的读者可以通过eject方法直接编辑webpack配置，应用上SCSS加载器。 深入浅出React和Redux