• 技术文章 >web前端 >前端问答

    react不能解析css怎么办

    藏色散人藏色散人2023-01-05 11:09:49原创124

    react不能解析css是因为webpack配置“css/less”文件的loader时,默认不开启模块化或者是由于引入方法不对导致的,其解决办法:1、更改下webpack的loader配置;2、在“index.css”文件中通过“@import '~antd/dist/antd.css';”方式引入即可。

    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

    react不能解析css怎么办?

    react 中引入外部css/less文件时,如果直接引入 =》 import “./search.less”;

    在使用时直接使用className即可, 如下图:

    3495cf986d394c3e84f074a4f1b967d.jpg

    但是如果采用这种方式引入=》import styles from “./search.less”;

    则会发现样式并不生效,如下图:

    35b905db11e69f0285febbcacb75518.jpg

    原因是,webpack配置css/less文件的loader时,默认不开启模块化,这种模块化方式引入需要更改下webpack的loader配置, 如下图:

    fa8ba229c19bede7d305af0f31c1edc.jpg

    写代码的时候使用antd的组件,觉得还是比较方便的(虽然antd密闭性也太好了)

    之前也出现过,因为下载antd出现的问题,使用npm的源国内无法使用。可以使用淘宝的镜像源,要是还不行就用手机的热点下载

    可是这次出现antd样式不生效的问题,我就装antd了好几遍,npm、cnpm、yarn都试了还是不行

    于是在网上找,但是其中的解决方法好像都没有对症下药,然后我有去官网看了下引入方法

    有以下表述:

    9c4a416ded17d6c24c5d66d50521406.jpg

    我的代码是在scr下的其他文件夹中写的,并且js文件没有创建对应css文件,应该不需要引入antd/dist/antd.css

    于是我想应该在入口文件index文件的css中引入,就成了

    解决方法:

    1、检查antd是否引入成功

    多试几次,要是有过多的warn,那说明就悬

    npm i antd
    cnpm i antd
    yarn add antd

    2、在index.css文件中引入:

    @import '~antd/dist/antd.css';

    推荐学习:《react视频教程

    以上就是react不能解析css怎么办的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:React css
    上一篇:react怎么隐藏按钮 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react http请求放在哪• react怎么实现登录和注册• react fetch怎么请求数据• react 表格怎么增加• react怎么隐藏按钮
    1/1

    PHP中文网