解决React中css模块化不起作用的问题

最新推荐文章于 2024-07-29 22:21:05 发布

ZeXinWang

最新推荐文章于 2024-07-29 22:21:05 发布

阅读量2.8k

点赞数

分类专栏： React学习中遇到的问题以及解决办法文章标签： react js css npm

本文链接：https://blog.csdn.net/ZeXinWang/article/details/109707916

版权

本文介绍了如何解决React应用中CSS模块化不生效的问题。通过执行`npm run eject`显示Webpack配置，然后在`webpack.config.js`文件中修改导入加载器配置，添加`modules: true`，保存并重新启动项目，使CSS模块化恢复正常。

摘要由CSDN通过智能技术生成

解决React中css模块化不起作用的问题

在终端里，执行npm run eject弹出webpack配置文件

npm run eject

回车；
会发现在node_modules文件上方弹出了config文件夹，在config 文件夹下找到webpack.config.js文件，打开：
找到这段代码，可以按command F快速查找

{
   
              test: cssRegex,
              exclude: cssModuleRegex,
              use: getStyleLoaders({
   
                importLoaders: 1，
                sourceMap

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ZeXinWang

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

react 项目 css模块化 ( babel-plugin-react-css-module )

weixin_44151357的博客

04-16

826

使用 create-react-app 初始化的项目所有的 css 文件默认是全局加载的，想要样式不冲突处理起来会有点麻烦，为了解决这个问题可以在 webpack 的配置使用 babel-plugin-react-css-module webpack配置文件暴露 npm run eject 项目默认不显示webpack的配置文件，在命令行工具里执行上述命令可以将webpack.config.js...

React中配置Sass引入.scss文件无效

qq_36519327的博客

02-21

662

React中配置Sass引入.scss文件无效

参与评论您还未登录，请先登录后发表或查看评论

react 模块化引入外部css文件不生效问题处理

最新发布

weixin_44523653的博客

07-29

366

webpack配置了css-loader,less-loader,webpack默认css modules为开启状态，只要添加了css-loader,就可以使用xx.module.css。最后很无奈，已经鼓捣一天了，对比正常项目的package.json，发现css-loader使用了最新版本7.1.x，旧项目使用的是6.x,抱着试试看的心态降低了版本，出现了奇迹。背景：自己使用webpack+react+css+less配置的项目框架，在使用过程中发现css module引入不生效。

react中css样式表无效

Ricale的博客

12-06

804

react中css样式表无效的问题

React项目中使用css样式修饰——css样式失效

all_might1的博客

07-24

1651

不要写成以下形式 <button className = 'css-btn' onClick = { this.handleBtnClick }>添加</button> className之后的=左右两边不要加空格反正就是很迷的感觉写C++写贯了，喜欢在=的两边都空出一格方便区分查看结果在设置样式的时候因为这样写了，结果其他都是对的，就是样式失效在页面中呈现不出来我感觉我的直觉还是蛮准的，想了下总觉得是不是空格的原因，就把空格删除了，于是样式就出来了。。.

react引入公共scss

qq_35438952的博客

07-30

338

第一步 cnpm i sass-resources-loader --save-dev 第二步找到 webpack.config.js 路径在：node_modules\react-scripts\config\webpack.config.js 第三步原始样子 { test: sassRegex, exclude: sassModuleRegex, use: getStyleLoaders(

create-react-app css不起作用

程序员大柱

03-26

334

使用create-react-app创建的react应用，默认是开启了css module的，所以需要按照css module的格式来写和应用；全局classname，引用后直接可以使用： //Test.module.scss .nav { color: yellow; } :global { .nav { color: red; } } //App.js import ...

react结合typeScript中CSS的模块化开发

zhengjie0722的博客

03-17

1015

前端开发中，正常引用css都是全部引用 import './App.css'，但是在react项目中，倾向于模块化开发，那么如何对css进行模块化开发呢。 1、首先在项目src的根目录新建文件名为custom.d.ts的文件，添加css对象模块的配置 declare module "*.css" { const css: { [key: string]: string } export default css } 2、模块化文件命名：修改App.css文件的文件名为App.module...

react-native-css-modules：使用CSS，PostCSS，Sass，Less或Stylus样式化React Native组件

02-04

这个库使得我们可以使用CSS、PostCSS、Sass、Less或Stylus来为React Native组件添加样式，并且提供了模块化的样式解决方案。 **CSS Modules** CSS Modules是CSS的一种模块化方式，它将全局CSS类名转换为局部变量，...

【React系列】React中的CSS

川峰的博客

01-02

1525

事实上，css 一直是 React 的痛点，也是被很多开发者吐槽、诟病的一个点。.vueVue在CSS上虽然不能称之为完美，但是已经足够简洁、自然、方便了，至少统一的样式风格不会出现多个开发人员、多个项目采用不一样的样式风格。

react脚手架写css样式不起作用

u012149637的博客

11-30

512

create-react-app

css modules在create-react-app中无效的解决办法

o__o__o__o的博客

05-16

576

转载: https://blog.csdn.net/zgd826237710/article/details/86478748

react-scripts的css modules

dechen6073的博客

10-25

127

用create-react-app创建的项目基于react-scripts内建支持css modules，需要把css文件名改成filename.module.css，导入方式需要改成： import styles from './Button.module.css'; // Import css modules stylesheet as styles cla...

webpack 打包成功，但是css不起作用

weixin_34293911的博客

04-17

920

问题: webpack 打包成功，但是css不起作用问题分析/解决: 原因有以下几种使用了webpack2的语法规则不正确; webpack2要求必须写-loader;可能是只写了css-loader，没有写style-loader；顺序反了，必须写成style-loader!css-loader;扩展：问: 如果没写style-loader或者没写css-loader会怎么样；答:　　没写...

tailwindcss 不生效问题记录

t1234tgb的博客

08-22

1434

试试查看tailwind.config.js文件是否有设置：important: "#app"，屏蔽这行即可。

tailwindcss配之后不生效

weixin_50572526的博客

01-24

2948

以上配置完成为了方便使用在vscode里面添加一个插件，这样每次能提醒相关class类名。重点我出现了bug，配置完成没问题之后，相关的class不生效。看到了没引入的 css样式没解析，为了让他解析成功。vite.config.js里面加上。然后问题就解决拉拉~~~~~~

解决storybook中组件的tailwindcss类不生效问题

陈小陈的博客

11-14

1559

解决storybook中组件的tailwindcss类不生效问题。

react中css样式模块化

07-25

在React中，可以使用CSS样式模块化来确保样式的封装和复用。一种常见的做法是使用CSS Modules。下面是一个简单的示例： 1. 安装依赖： ```bash npm install --save-dev css-loader style-loader ``` 2. 创建一个CSS文件，例如 `styles.module.css`： ```css .container { background-color: #f1f1f1; padding: 20px; } .title { font-size: 24px; color: #333; } ``` 3. 在React组件中引入样式文件并使用： ```jsx import React from 'react'; import styles from './styles.module.css'; const MyComponent = () => { return ( <div className={styles.container}> <h1 className={styles.title}>Hello React</h1> </div> ); }; export default MyComponent; ``` 在上面的示例中，`styles` 对象是通过 CSS Modules 自动生成的。你可以在组件中通过 `styles.className` 的方式来引用对应的样式类名，确保样式的模块化。这样做可以避免全局污染和样式冲突的问题。当构建项目时，Webpack会自动将CSS Modules转换为唯一的类名，并将其应用到相应的元素上。这样，你就可以在React组件中方便地使用模块化的CSS样式了。