×
  • 反应– The Complete Guide (incl. 反应Router 4 & Redux)

  • 32 – Enable 和 Use 的CSS Modules In 反应

    课程清单
    [在React中启用和使用CSS模块,在React中启用和使用CSS模块]

    在上一课中,您了解了镭的第三部分程序包,该程序包非常流行,它允许您将内联样式与媒体查询等功能一起使用。
    现在,这是确定样式的一种方法,可以轻松地对其进行编辑并仍然使用媒体查询等功能, 这不是唯一的方式.

    –如果像我们这样的CSS文件,那会不会很棒 可以在 Person.js 组件文件,以便我们在其中定义的任何样式 人.css 可以导入并分配给组件中的元素,并且不会覆盖样式和其他组件或应用程序的其他部分。

    React中的CSS模块

    这是可能的,并且在我们这里使用的设置中也是可能的。我们可以使用名为CSS模块的功能,我想向您展示如何使用set。
    首先,摆脱镭,删除组件中的样式设置,并从出口方法中都删除镭 Person.jsApp.js 文件。
    现在,要处理范围内的CSS文件中的所有内容,并且要做到这一点,我们需要调整项目的构建配置。
    I have mentioned earlier in this course that we are using react-scripts (you can see in package.json),这是一个可以向我们展示整个构建工作流程的软件包,我们无法真正添加到配置中。

    反应喷射 command

    值得庆幸的是,有一条命令使我们能够访问配置。

    喷射 :您可以运行NPM 喷射,一切都由我管理,但我可以编辑配置项目。
    package.json
    
    ...
      "剧本": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "喷射": "react-scripts 喷射"  // gives access to 配置uration
      },
    ...
    

    现在不会有退路,但它应该不会中断,它仍然可以像以前一样工作,但是随后您可以编辑配置。

    解锁CSS模块的功能

    当然,应该谨慎操作,因为您不想破坏设置。

    重要:
    One important ote if you are using GIT to track you changes make sure you add 和 commit all changes before you run the 喷射 command it will not work otherwise.

    在终端中打开项目文件夹,然后运行以下命令。

    重击
    
    npm run 喷射
    

    如果我们想这样做,将提示您,因为我们无法返回。
    现在您将看到一些新文件夹,即 剧本配置 夹。

    配置Webpack配置文件

    但是对我们来说,在config文件夹中有趣的是 webpack.config.js
    既然Web Pack是对此负责的人,那么Web Pack是我们现在还可以调整处理CSS文件的方式以及可以解锁我使用CSS模块所指的其他功能的地方。
    所以里面 webpack.config.js file find for test: cssRegex, 和 add update the code as mention below.

    webpack.config.js
    
    ...
    {
      test: cssRegex,      // find for this
      exclude: cssModuleRegex,
      use: getStyleLoaders({
        importLoaders: 1,
        sourceMap: isEnvProduction && shouldUseSourceMap,
        // Update this below two lines.. Or else it wont work
        modules: true,
        getLocalIdent: getCSSModuleLocalIdent,
      }),
      ...
    }
    ...
    

    一件重要的事情改变之后,当我们导入时 App.css 现在它将在 App.css 文件导入到我们导入的那个App组件中。
    我们还需要调整该导入声明

    App.js
    
    import AppClasses from './App.css';
    

    并将该类分配到我们的return语句中。

    App.js
    
    import AppClasses from './App.css';
    ...
    return (
      <div className={AppClasses.App}> {/* Javascript Object containing the 的CSS classes from App.css */}
    		 ...
    	</div>
    );
    ...
    

    就像我们以前所做的一样,但现在我们在幕后使用了完全不同的技术。

    的CSS加载器( 在webpack.config.js中 ):
    的CSS加载器在这里当然没有什么真正的魔力,请理解这里发生的事情是CSS加载器使用我们在Web包中设置的本地标识名称模式将我们在CSS文件中设置的CSS类名转换为唯一的类名。 。

    对于我们正在推动类的那段的相似内容,我们可以在那里简单地推动我们导入的类。

    App.js
    
    import AppClasses from './App.css';
    ...
    const classes = [];
    if (this.state.persons.length <= 2) {
    	classes.push(AppClasses.red);
    }
    if (this.state.persons.length <= 1) {
    	classes.push(AppClasses.bold);
    }
    return (
    	<div className={AppClasses.App}>
    		{/* Javascript Object containing the 的CSS classes from App.css */}
    		<button style={style} onClick={this.togglePersonsHandler}>
    			Switch Name
    		</button>
    		<p className={classes.join(' ')}>Some Random Paragraph</p>
    		{persons}
    	</div>
    );
    ...
    
    注意:
    即使遵循了所有步骤(如果确实可行),也只需开发服务器即可。因为如果我们按照配置进行配置,就必须这样做。

    当您发现我们的 App.css 类已实现,但 人.css 样式丢失,这很正常,因为我们尚未调整组件。

    调整人

    在人员部分中,我们也遵循与之前相同的模式 App.js 文件。

    src / Person / Person.js
    
    import 反应from 'react';
    import PersonClasses from './Person.css';
    const person = props => {
    	return (
    		<div className={PersonClasses.Person}>
    		...
    		</div>
    	);
    };
    export 默认 person;
    

    And now we are back to the old setup with our card look. Now finally lets make that media query 和 that :hover state work too with the 的CSS modules well do this in the next lesson.

    反应introduction
    反应Component
    在React中启用和使用CSS模块
  • 启用通知    不用了,谢谢