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

简介: 最新版本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

目录
相关文章
|
4月前
|
Java 应用服务中间件 Windows
【应用服务 App Service】App Service 中部署Java项目,查看Tomcat配置及上传自定义版本
【应用服务 App Service】App Service 中部署Java项目,查看Tomcat配置及上传自定义版本
|
1月前
|
前端开发
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 提高开发效率和代码质量。
36 3
|
2月前
|
前端开发 JavaScript
React Tailwind CSS
10月更文挑战第12天
21 1
|
2月前
|
前端开发 容器
React 使用 CSS 样式
10月更文挑战第12天
42 0
|
2月前
|
开发工具 iOS开发 MacOS
【Mac_mistake】app不能安装在未命名需要OSv11.13或更高版本
【Mac_mistake】app不能安装在未命名需要OSv11.13或更高版本
134 0
|
3月前
|
JavaScript 前端开发
react Or vue中引入animate.css
本文介绍了如何在React或Vue项目中引入animate.css库来使用动画效果,包括通过npm安装或在线链接引入,并展示了如何在React组件和Vue路由过渡中使用动画类。
80 0
|
4月前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘?带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中,高效与可维护性至关重要。JavaServer Faces(JSF)框架通过其面向组件的开发模式,提供了构建复杂用户界面的强大工具,特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观,可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件,并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap,可以进一步丰富组件库,提升用户体验。
62 0
|
4月前
|
前端开发 JavaScript 开发者
【前端革新力】React与CSS-in-JS完美邂逅:从styled-components到emotion,全面解析样式管理新趋势的实战应用与优势剖析!
【8月更文挑战第31天】CSS-in-JS 作为一种新兴的样式管理方式,近年来在前端社区受到广泛关注。它将样式嵌入 JavaScript,实现了样式与逻辑的高度耦合,提升了开发效率并解决了全局样式污染等问题。本文通过具体代码示例,探讨 CSS-in-JS 在 React 开发中的应用,并分享实践心得。首先介绍了 CSS-in-JS 的基本概念,然后详细展示了如何使用 styled-components 和 emotion 这两个流行库创建样式化组件。
233 0
|
5月前
|
人工智能
魔搭多模态AI单词助记&通义APP即时口语练习,你从未体验过的全新版本!
首次接触魔搭多模态AI单词助记工具让我颇感惊喜。传统背单词方式枯燥低效,而该工具通过生成关联图像、短语或故事,让记忆变得生动有趣。访问[Word-wizard](https://modelscope.cn/studios/makabakaing/Word-wizard)体验其图文记忆和视觉学习功能。目前图文记忆功能似乎存在问题,但视觉学习功能仍可正常使用,能识别图片特征并生成释义和例句,辅助学习效果不错。此外,可通过通义APP实现即时口语练习,尽管缺乏上下文记忆功能,但仍是一个优秀的练习工具。

热门文章

最新文章