在创建应用程序反应中使用CSS模块的方法示例 - 行业资讯

请先进行全局安装create-react-app插件哈,安装命令:npm安装create-react-app - g

<强>先使用create-react-app命令下载一个脚手架工程,安装命令:

　　　　　　#使用npx 　　美元npx create-react-app我的程序　　　　#使用npm 　　美元npm init npx create-react-app app 　　　　#使用纱　　美元纱创建react-app app 　　　　

<>强运行项目

　　　　　　$ cd我的程序　　　　#使用npm 　　美元npm开始　　　　#或者使用纱　　#纱线开始　　　　

在浏览器中输入<代码> http://localhost: 3000>

create-react-app中内置了使用CSS模块的配置,当前方式就是使用create-react-app内置的用法

<强>方式

将所有的。css/认为王力宏/css等样式文件都修改成.module.css/.module.less/.module。scss等。即可使用CSS模块的方式进行引入使用了。

<强>用法

编写一个css文件:Button.module.css

　　　　　　. error { 　　背景颜色:红色; 　　} 　　　　

在编写一个普通的css文件:another-stylesheet.css

　　　　　　. error { 　　颜色:红色; 　　} 　　　　

在js文件中使用CSS模块的方式进行引用:Button.js

　　　　　　进口的反应,从“反应”{组件}; 　　从“进口风格。/Button.module.css ';//使用CSS模块的方式引入　　进口的。/another-stylesheet.css”;//普通引入　　　　类按钮扩展组件{ 　　呈现(){//引用作为一个javascript对象　　返回& lt;按钮className={styles.error}祝辞错误Button; 　　} 　　} 　　　　

<强>在浏览器中查看效果

此时按钮组件的背景颜色是红色,但是字体颜色却不是红色,因为使用了Css模块之后,普通的Css样式就不起效果了,需要用全局的方式编写才可以(全球)。最后添加到元素上的样式结果为:<代码> & lt;按钮类=癇utton_error_ax7yz”在错误Button

<强>方式

在命令行运行<代码> npm运行弹出命令

此命令会将脚手架中隐藏的配置都展示出来,此过程不可逆

运行完成之后,打开配置目录下的webpack.config。js文件,找到<代码>测试:cssRegex>

在使用属性执行的方法中添加<代码>模块:真正的>

<人物> 在创建应用程序反应中使用CSS模块的方法示例”>,
　　 <强>用法</强> 
　　和第一种方式的用法一致,只是不需要在css文件后面加.module后缀了
　　编写一个css文件:Button.css 
　　
　　<pre类= 　　. error { 　　背景颜色:红色; 　　}

再编写一个普通的css文件:another-stylesheet.css

　　　　　　. error { 　　颜色:红色; 　　} 　　　　

在js文件中使用CSS模块的方式进行引用:Button.js

　　　　　　进口的反应,从“反应”{组件}; 　　从“进口风格。/Button.css ';//可以直接使用CSS模块的方式引入了　　进口的。/another-stylesheet.css”;//普通引入　　　　类按钮扩展组件{ 　　呈现(){//引用作为一个javascript对象　　返回& lt;按钮className={styles.error}祝辞错误Button; 　　} 　　} 　　　　

在浏览器中查看效果

如想使用第二种方式对萨斯和少也使用CSS模块的方式进行引用,则类似的在sass和少解析配置上也添加模块:真实即可。

<强>注意

默认create-react-app脚手架不能直接使用sass和少直接编写css,需要先进行相应配置。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。