zoukankan      html  css  js  c++  java
  • React AntDesign 引入css

    React项目是用umi脚手架搭建的AntDesign,用到一个第三方表格组件Jexcel,npm install 之后组件的样式加载不上,犯了愁,翻阅各种资料,踏平两个小坑。

    大家都知道,安装完成的组件都会在node_modules中,组件对应的依赖也是,包括css。官方文档写的倒是很简单,组件头部直接 import "../node_modules/jexcel/dist/jexcel.css",开发的第一反应是只有路径没错,应该是可以用的。

    贴上安装后在node_modules文件夹中的目录

    事实说明确实不可以用“This relative module was not found:”(脑补笑哭的表情)

    百度之,也没搜出个所以然,冥冥之中感觉是不是有啥配置再阻挠我前进的脚步(有知道的大神请告知)

    实在没办法,把css复制到运行文件的同目录下 import './jexcel.css',心想着这总该行了吧,尝试后没有任何效果,也不报错,故怀疑是umi脚手架的问题,果然发现第一个小坑,umi想直接引用css需要在配置文件中设置

    cssLoaderOptions: {
            localIdentName: '[local]'
    }
    (后来拓展了一下知识库,大概知道本质是这个css-loader这个东西,后续再研究。。。)
     
    回过头来想刚才的那个问题,肯定不是说node_modules这个目录的文件不能引用,突然灵光乍现(React小白,其实很简单,只是思想还没转变过来,哈哈),既然 import jexcel from 'jexcel' 都能加载到这个组件的模块里依赖的文件,那jexcel就相当于这个组件的一个入口。
    所以把引用写成这样 import 'jexcel/dist/jexcel.css',果然大功告成。
     
    哈哈,其实是很简单的两个小问题,希望能给初学者提供点经验帮助。
    测试签名
  • 相关阅读:
    #333 Div2 Problem B Approximating a Constant Range(尺取法)
    苦逼的单身狗(玄乎的尺取大法)
    欧拉项目第四题之三位数之积数的最大回数
    欧拉项目第三题之最大质数因子
    关于尺取法的认识与简单例题
    codeforces 980B Marlin
    康托展开和逆康托展开
    Chrome控制台中Network的Preview与Response区别
    配置Express中间件
    Express中间件简介
  • 原文地址:https://www.cnblogs.com/WinterSir/p/12292435.html
Copyright © 2011-2022 走看看