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',果然大功告成。
 
哈哈,其实是很简单的两个小问题,希望能给初学者提供点经验帮助。

React AntDesign 引入css的更多相关文章

  1. React中使用CSS

    第一种: 在组件中直接使用style 不需要组件从外部引入css文件,直接在组件中书写. import React, { Component } from "react"; con ...

  2. react&webpack使用css、less && 安装原则 --- 从根本上解决问题。

    在webpack-react项目中,css的使用对于不同人有不同的选择,早起是推荐在jsx文件中使用 css inline js的,但是这种方法要写很多对象来表示一个一个的标签,并且对于这些对象,我们 ...

  3. 12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画

    一. 过渡动画 # index.js import React from 'react';import ReactDOM from 'react-dom';import App from './app ...

  4. 聊一聊 React 中的 CSS 样式方案

    和 Angular,Vue 不同,React 并没有如何在 React 中书写样式的官方方案,依靠的是社区众多的方案.社区中提供的方案有很多,例如 CSS Modules,styled-compone ...

  5. CSS系列:在HTML中引入CSS的方法

    HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...

  6. Spring MVC:在jsp中引入css

    为了将css引入jsp中,今天可真是踩了好多坑,最后在stackoverflow上找到了解决方法,不多说贴出代码. 在web.xml中添加以下代码: <servlet-mapping> & ...

  7. React Native 中 CSS 的使用

    首先声明,此文原作者为黎 跃春 React Native中CSS 内联样式 对象样式 使用Stylesheet.Create 样式拼接 导出样式对象 下面的代码是index.ios.js中的代码: / ...

  8. html引入css文件

    在HTML中,引入CSS的方法主要有行内式.内嵌式.导入式和链接式. 行内式:即在标记的style属性中设定CSS样式,这种方式本质上没有体现出CSS的优势,因此不推荐使用.例: <html&g ...

  9. 引入CSS

    前面的话 Web早期,HTML是一种很有限的语言,这种语言不关心外观,它只是一种简洁的小型标记机制.随着Mosaic网页浏览器的出现,网站开始到处涌现.对于页面改变外观的需求增加,于是增加了类似< ...

随机推荐

  1. tpyboard v202 测试tcp通讯,i2c的oled程序,呼吸灯源码,希望对大家有所帮助

    1.下载到板子里的main.py代码如果需要驱动oled的,可以参考我上面那篇文章import time, mathimport machineimport network# from ssd1306 ...

  2. TensorFlow系列专题(十四): 手把手带你搭建卷积神经网络实现冰山图像分类

    目录: 冰山图片识别背景 数据介绍 数据预处理 模型搭建 结果分析 总结 一.冰山图片识别背景 这里我们要解决的任务是来自于Kaggle上的一道赛题(https://www.kaggle.com/c/ ...

  3. Consul+Nginx部署高可用

    1. Consul Server 创建consul server虚拟主机 docker-machine create consul 出现如下内容即创建成功 Running pre-create che ...

  4. 字典树模板 HDU - 1251

    题意: 给一些单词,换行键后,查找以后输入的单词作为前缀的话们在之前出现过几次. 思路: 字典树模板----像查字典的顺序一样 #include<string> #include<s ...

  5. 《 OO第一作业周期(前四周)总结 》

    作为一名软件工程的大学生,很高兴能够以这样一种方式,实现对博客编写零的突破.专业课老师也介绍了编写博客给我们带来的帮助,听了以后,我感觉到了培养出写博客的习惯,是一件多么有意义的事! 话不多说,让我们 ...

  6. 写给小白看的入门级 Java 基本语法,强烈推荐

    之前写的一篇我去阅读量非常不错,但有一句留言深深地刺痛了我: 培训班学习半年,工作半年,我现在都看不懂你这篇文章,甚至看不下去,对于我来说有点深. 从表面上看,这句话有点讽刺我的文章写得不够通俗易懂的 ...

  7. 一款基于SVM算法的分布式法律助手

    一. 项目简介 与 使用说明 体验网站(适配手机端): http://www.zhuchangwu.com 项目基于 Spring Cloud .Vue 构建,平台针对需要维权的用户而设计,主要提供如 ...

  8. Sqli-labs Less-58 报错注入 5次机会

    执行sql语句后,并没有返回数据库当中的数据,所以我们这里不能使用union联合注入,这里使用报错注入.但是需要注意这里只有5次机会尝试. 找表名 http://127.0.0.1/sql/Less- ...

  9. 在markdown中怎么划线?-[markdown]

    使用html标签:<hr/> 示例: 百灵鸟,飞过蓝天. <hr/> 我爱你,我亲爱的祖国. <hr/> 生为华夏傲骨,死是华夏精魂. 效果: ![](https: ...

  10. CSS实现文本,DIV垂直居中

    https://blog.csdn.net/linayangoo/article/details/88528774 1.水平居中 1.行内元素水平居中 text-align:center; 利用tex ...