AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

最新版本create-react-app 如何使用css-module

2024-03-08 210
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 最新版本create-react-app 如何使用css-module

最新版本create-react-app 如何使用css-module

首先找到我们的config目录中的webpack.config.js，箭头处的代码，意思是css,scss,less文件，后缀名 .module.css 才会自动开启css module 不然就按常规css走

以scss为例，新建Login.module.scss

之后在Login.tsx中引入Login.module.scss，并使用css-module的写法

css module生效

文章参考：http://react-china.org/t/css-modules–/30650/3

文章标签：
前端开发
关键词：
版本APP
APP css
create-react-app CSS
react CSS
React Native css
Boale_H
目录
相关文章
游客ib7xsk7hcucuo
|
11月前
|
存储 前端开发 JavaScript
仿真银行app下载安装， 银行卡虚拟余额制作app，用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目，用于学习前端开发基础。用户可进行存款、取款操作，所有数据存储于浏览器内存中
游客ib7xsk7hcucuo
2997 4
路边两盏灯
|
应用服务中间件 Linux nginx
【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢？
基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢？Web App Linux 默认使用的 Nginx 版本是由平台预定义的，无法更改这个版本。
路边两盏灯
375 77
路边两盏灯
|
12月前
【Function App】在PowerShell Function中指定特殊的Microsoft.Graph.Users版本
在Azure Function App中运行PowerShell Function时，通过Requirements.psd1文件管理模块版本。若需将“Microsoft.Graph.Users”从最新版2.26.0改回2.23.0以避免冲突，可通过以下步骤解决：1) 在requirements.psd1中明确指定版本为2.23.0 2) 在profile.ps1中添加`Import-Module Microsoft.Graph.Users -RequiredVersion 2.23.0`语句。此方法确保加载特定版本模块
路边两盏灯
224 18
鱼的爱情看不出泪水
|
10月前
|
iOS开发 MacOS
如何指定下载不同版本macOS app
本文介绍了多种下载和安装 macOS 的方法，包括使用终端命令下载指定版本的 macOS App 或 PKG 文件，以及通过脚本工具如 installinstallmacos.py 和 fetch-installer-pkg 实现自动化下载。同时还讲解了如何将 macOS 安装程序制作成可启动 U 盘，适用于系统重装或部署场景。
鱼的爱情看不出泪水
1208 0
卓伊凡
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用（flutter version manage）-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用（flutter version manage）-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
卓伊凡
933 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用（flutter version manage）-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
路边两盏灯
|
C#
【Azure Function App】Azure Function 从.Net6 升级到 .Net8 后 Function出现运行时版本错误
FUNCTIONS_INPROC_NET8_ENABLED 值为 1
路边两盏灯
321 44
龙大吉
|
前端开发
create-react-app 如何使用 less/sass 和 react-css-modules？
本文详细介绍了在 create-react-app 项目中如何使用 less/sass 和 react-css-modules 来管理和应用样式。首先，通过安装相应依赖并配置 webpack 支持 less/sass；接着，介绍如何使用这些预处理器编写样式；最后，讲解了如何配置和使用 react-css-modules 实现样式的模块化管理，以及如何结合使用 less/sass 和 react-css-modules 提高开发效率和代码质量。
龙大吉
438 3
听白
|
前端开发 JavaScript
React Tailwind CSS
10月更文挑战第12天
听白
522 1
听白
|
前端开发 容器
React 使用 CSS 样式
10月更文挑战第12天
听白
249 0
Codelinghu
|
开发工具 iOS开发 MacOS
【Mac_mistake】app不能安装在未命名需要OSv11.13或更高版本
【Mac_mistake】app不能安装在未命名需要OSv11.13或更高版本
Codelinghu
2054 0

热门文章

最新文章

  • 1
    Context-React跨组件访问数据的利器
  • 2
    React 组件介绍
  • 3
    React Proxy 详细流程与配置方式（webpack、setupProxy.js、package.json）
  • 4
    探究移动端混合开发技术：React Native、Weex、Flutter的比较与选择
  • 5
    好程序员web前端培训分享React学习笔记（三）
  • 6
    React 18 新特性之 useId 详细解读
  • 7
    Vite2+React+TypeScript：搭建企业级轻量框架实践
  • 8
    快速构建Web应用，从零学习React后台项目模版
  • 9
    前端学习笔记202307学习笔记第六十一天-react知识点串讲之2
  • 10
    使用typescript编写react的时候，props的interface和react本身的proptypes有什么关系
  • 1
    【App Service】部署War包到Azure云上遇404错误
    669
  • 2
    如何在1v1视频直播交友APP中实现防录屏防截屏功能？
    988
  • 3
    uni-app中如何使用scss定义变量
    657
  • 4
    【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    956
  • 5
    Qoder + ADB Supabase ：5分钟GET超火AI手办生图APP
    1025
  • 6
    最佳实践3：用通义灵码开发一款 App
    818
  • 7
    【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    344
  • 8
    【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
    1248
  • 9
    如何优化UniApp开发的App的启动速度？
    1256
  • 10
    UniApp开发的App在启动速度方面有哪些优势和劣势？
    572

    • 相关课程

    更多
  • CSS 快速掌握
  • React 入门与实战
  • React 入门教程开发文档
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 互联网安全-移动APP漏洞风险与解决方案

    • 相关电子书

    更多
  • 女性移动App安全攻防战
  • 汇聚云计算的生态核能——云市场，云上APP Store
  • 千万级用户直播App——服务端架构设计和思考
    • 下一篇
    [网络安全] Dirsearch 工具的安装、使用详细教程