来源|ChainDesk（ChainDesk.CN）内容编辑，ChainDeskSlogan|连接每一位程序员的故事网站|http://chaindesk.cn愿码愿景|打造全学科IT系统免费课程，帮助新手用户和初级工程师零成本免费学习系统，低成本进阶，帮助BAT一线高级工程师成长，利用自身优势创造睡后收入。官方公众号|愿望码|WishCode服务编号|区块链部落免费加入WishCode全思维工程师社区|任意公众号回复“WishCode”获取二维码入群13分钟前有了CreateReactApp，你真的没有太多选择可以直观的清理。通常在随机层叠样式表(CSS)项目维护者的突发奇想下，试图让其他库、框架或预处理器参与项目的编译过程常常成为一场噩梦。CreateReactApp上下文中的预处理器基本上是构建过程中的一个步骤。在这种情况下，我们谈论的是采用一些样式代码（CSS或其他），将其编译成基本CSS，并将其添加到构建过程的输出中的东西。在本文的篇幅中，我们将涵盖各种与样式相关的功能的材料，并在我看来重点介绍CreateReactApp中最好的新功能之一：支持CSS模块和SASS。介绍CSS模块CSS模块以一种防止引入全局重叠命名空间的方式模块化您导入的任何CSS代码，尽管最终结果仍然只是一个巨大的CSS文件。更好的项目组织让我们从清理项目中的目录结构开始。我们所要做的就是将带有CSS和JavaScript代码的每个组件分离到它自己的文件夹中。我们先创建NewTodo、Todo、App、TodoList和Divider文件夹，并将它们的所有相关代码放在每个文件夹中。我们还需要在每个调用的目录下新建一个文件，index.js文件只负责对应组件的导入导出。例如，App索引文件(src/App/index.js)将如下所示：importAppfrom"./App";导出默认应用程序；Todo(src/Todo/index.js)新的索引文件将如下所示：importTodofrom"./Todo";exportdefaultTodo;你可以根据这个模式猜出索引文件NewTodo、TodoList的内容和它们的Divider外观。接下来，我们需要更改引用这些文件的每个地方，以便更容易地导入所有这些文件。不幸的是，这将是一些乏味的工作，但我们需要做同样的事情以确保我们不会在这个过程中破坏任何东西。首先，在src/App/App.js中，将TodoList导入组件更改为以下内容：importTodoListfrom"../TodoList";我们不需要对Divider做任何事情，因为它是一个没有导入的组件。NewTodo和Todo是相似的类型，所以我们也可以跳过它们。另一方面，src/TodoList/TodoList.js，我们有很多事情要处理，因为它是我们最高级别的组件之一并且导入了很多：importTodofrom"../Todo";从“../NewTodo”导入NewTodo；从“../Divider”导入Divider；但这还不是全部。我们的测试文件src/TodoList/TodoList.test.js也需要修改以包含文件的这些新路径，否则我们的测试将失败！我们需要和以前几乎一样的导入列表：importTodoListfrom"./TodoList";从“../NewTodo”导入NewTodo；从“../Todo”导入待办事项；当你重新加载你的应用程序时，你的代码应该仍然可以正常工作，测试应该全部通过，一切都应该是干净的！我们完整的项目结构现在应该是这样的：src/App/App.cssApp.jsApp.test.jsindex.jsDivider/Divider.cssDivider.jsindex.jsNewTodo/NewTodo.cssNewTodo.jsNewTodo。test.jsindex.jsTodo/Todo.cssTodo.jsTodo.test.jsindex.jsTodoList/TodoList.cssTodoList.jsTodoList.test.jsindex.jsindex.cssindex.jssetupTests.js...等等...将CSS模块引入我们的应用程序如果我们想使用CSS模块，我们需要遵循一些简单的指南。首先，我们需要将文件命名为[whatever].module.css而不是[whatever].css。接下来我们需要做的是确保我们的样式命名简单且易于引用。让我们首先遵循这些约定并将我们的CSS文件重命名为Todoassrc/Todo/Todo.module.css，然后我们将稍微更改内容：.todo{border:2pxsolidblack;文本对齐：居中；背景：#f5f5f5；颜色：#333；边距：20px；padding:20px;}.done{background:#f5a5a5;}接下来，我们将打开src/Todo/Todo.js以利用CSS模块。我们在Todo组件中创建了一个辅助函数cssClasses()，它返回我们应该在组件中使用的样式，我们不需要进行更改以使一切都像以前一样工作。我们还需要更改顶部的import语句，因为我们重命名了文件并正在更改将CSS加载到代码中的方式！看看下面的：importstylesfrom"./Todo.module.css";这允许我们的代码通过在styles.[className]中引用它们来利用Todo.module.css定义的任何类名。例如，在前面的文件中我们定义了两个CSS类名：todo和done，所以我们现在可以通过styles.Todo和styles.done在我们的组件中引用它们。我们需要更改cssClasses()函数才能使用它，所以现在让我们进行这些确切的更改。在src/Todo/Todo.js中，我们的cssClasses()函数现在应该如下所示：cssClasses(){letclasses=[styles.todo];如果(this.state.done){classes=[...classes,styles.done];}returnclasses.join('');}保存并重新加载，我们的应用程序应该恢复正常了！接下来，让我们将组件hr中的标签todo更改为具有我们自己的样式和效果。回到src/Todo/Todo.module.css并为我们的hr标签添加以下块，我们将提供一个新类redDivider:.redDivider{border:2pxsolidred;}最后，回到我们的render()函数在src/Todo/Todo.js中，保存并重新加载render()函数的hr标签包含更改，现在我们应该完全划分我们的CSS代码，而不用担心冲突和全局命名空间！输出如下所示：与CSS模块的可组合性这并不是CSS模块给我们的全部，尽管它肯定是我们可以立即轻松获得的CSS模块的重要组成部分之一。我们还获得了CSS可组合性，能够从其他类继承CSS类，无论它们是否在主文件中。这在您设置更复杂的嵌套组件时非常有用，这些组件都需要处理略有不同的样式表，但彼此之间差别不大。假设我们希望能够将某些组件标记为关键组件，而不仅仅是常规的待办事项。我们不想对组件进行太多更改；我们希望它继承与所有其他Todo相同的基本规则。我们需要设置一些代码来实现这一点。回到src/Todo/Todo.js，我们将进行一些更改以允许一个名为critical的新状态属性。我们将从构造函数组件开始，我们将添加新的状态属性和绑定函数标记：constructor(props){super(props);this.state={done:false,critical:false};this.markAsDone=this.markAsDone。bind(this);this.removeTodo=this.removeTodo.bind(this);this.markCritical=this.markCritical.bind(this);}我们在critical属性中添加一个新属性，state并将其设置为默认false。然后我们还引用了一个函数（我们还没有写）markCritical，我们绑定它，因为我们稍后会在事件处理程序中使用它。接下来，我们将修复此markCritical()：markCritical(){this.setState({critical:true});我们还需要修改我们的cssClasses()函数，以便它可以对这个新的状态属性做出反应。为了演示CSS模块的组合能力，我们将classes设置为一个空数组，然后第一项变为关键或待办事项，具体取决于该项目是否被标记为关键：如果（this.state.critical）{classes=[styles.critical];}else{classes=[styles.todo];}if(this.state.done){classes=[...classes,styles.done];}returnclasses.join('');最后，在我们的渲染函数中，我们将创建按钮标记以将项目标记为关键：render(){return({this.props.description}MarkasDoneRemoveMeMarkasCritical);我们还没有完成，尽管我们至少完成了90%。我们还想回到src/Todo/Todo.module.css并为关键类名添加一个新块，我们还将使用我们的可组合属性：.critical{composes:todo;border:4pxdashedred;}要使用compose，你需要做的就是添加一个新的CSS属性，composes，并给它一个你希望它组合的类名（或多个类名）。在这种情况下，Compose是一种奇特的说法，它继承了其他类名的行为并允许您覆盖其他类名。在前面的例子中，我们说critical是一个CSS模块类，它是在todo模型的基础上加了一个红色大虚线的border组件，因为，我们只是说它是critical。像往常一样保存并重新加载，您应该能够将项目标记为标记为完成、标记为关键或两者，或者通过单击删除我来删除它们，如以下屏幕截图所示：！在继续之前，您还需要通过在屏幕中按U来快速更新测试快照yarntest。将SASS引入我们的项目SASS本质上是具有扩展功能支持的CSS。当我在这里说扩展功能支持时，我是认真的！SASS支持以下CSS中缺少的功能集：变量嵌套部分CSS文件导入支持混合扩展和继承运算符和计算获得SASS支持非常容易。我们首先需要通过yarn或npm安装它。$yarnaddnode-sass我们会看到很多输出，但假设没有错误并且一切顺利，我们应该能够重新启动我们的开发服务器并开始使用一些SASS。让我们创建一个更通用的实用程序SASS文件，它将负责存储我们想要在整个应用程序中使用的标准化颜色，以及存储整洁的渐变hr模式的东西，以防我们想在其他地方使用它。我们还将更改我们正在使用的一些颜色，因此有一些红色、绿色和蓝色，具体取决于项目分别是关键的、完成的还是两者都不是。此外，我们需要稍微更改我们的项目并添加一个新文件以了解共享样式和颜色。那么，让我们开始吧：src/shared.scss在我们的项目中创建一个新文件并给它以下内容：$todo-critical:#f5a5a5;$todo-正常：#a5a5f5；$todo-complete:#a5f5a5;$fancy-gradient:线性渐变（向右，rgba(0,0,0,0),rgba(0,0,0,0.8),rgba(0,0,0,0));往下走，跳转到src/Divider/Divider.css，将文件重命名为src/Divider/Divider.scss。接下来，我们将src/Divider/Divider.js中对Divider.css的引用更改为：import"./Divider.scss";现在我们需要更改Divider.scss中的代码以导入我们的共享变量文件并将变量用作其中的一部分：@import"../shared";hr{border:0;height:1px;background-image:$fancy-gradient;}因此，在我们新的共享SASS文件中，我们导入src/，然后该背景图像值仅引用我们创建的$fancy-gradient变量，这意味着我们现在可以在需要时重新创建花式渐变，而无需一遍又一遍地重写它。保存并重新加载，您应该看不到重大变化。混合SASS和CSS模块好消息是，在CreateReactApp中将SASS引入CSS模块基本上并不复杂。其实步骤都是一样的！所以，如果我们想开始混合这两者，我们需要做的就是重命名一些文件并改变我们处理导入的方式。让我们看看实际效果：首先，返回到我们的src/Todo/Todo.module.css文件并进行非常小的修改。具体来说，我们将其重命名为src/Todo/Todo.module.scss。接下来，我们需要更改import语句src/Todo/Todo.js，否则整个事情将崩溃：importstylesfrom"./Todo.module.scss";现在，我们应该让我们的SASS使用Todo组件的CSS模块，让我们开始使用它。同样，我们也需要将我们的共享文件导入到这个文件SASS中。请注意src/Todo/Todo.module.scss中的以下内容：@import'../shared';接下来，我们需要开始更改对各种背景颜色的引用。我们将常规Todo的背景更改为$todo-normal。然后，我们将已完成的Todo的背景更改为$todo-complete。最后，我们要将关键项更改为$todo-critical:.todo{border:2pxsolidblack;文本对齐：居中；背景：$todo-normal；颜色：#333；边距：20px；padding:20px;}.done{background:$todo-complete;}.hr{border:2pxsolidred;}.critical{composes:todo;background:$todo-critical;}保存并重新加载我们的项目，让我们确保尊重新的调色板场景：我们现在在CreateReactApp项目中很好地集成了CSS模块和SASS，而无需安装任何新的依赖项。我们让他们一起打得很好，这是一个更大的成就！
