React 添加对 Less 的支持, 使用 create-react-app 脚手架
---恢复内容开始---
参考博客与我自己的当前版本有一点出入, 所以就将 参考博客写到文章后面去了。
我的电脑: 系统: Ubuntu16.04,
1, 安装脚手架: create-react-app; 参考: https://ant.design/docs/react/use-with-create-react-app-cn
注意点: 如果这个命令 create-react-app 不是在任何目录下面使用, 说明这个安装的时候没有将 create-react-app 命令变成全局的命令,改变
我自己添加了一个软连接:
pwd: /usr/sbin
lrwxrwxrwx 1 root root 58 Nov 14 08:12 create-react-app -> /usr/local/node/lib/node_modules/create-react-app/index.js*
2, 创建项目: create-react-app demo1;
3, 测试项目: yarn start; 浏览器可以正常打开 React 界面;
4, 添加 less, less-loader 模块: yarn add less less-loader;
5, 执行 命令: yarn run eject; // 这个命令会生成一些文件用来支持 Less 的, 具体原因也是不太清楚;[错误1:]
6, 然后就生成了: webpack.config.js 在 demo1/config/webpack.config.js 这个目录下面;
[ 网上很多说有: webpack.config.dev.js、webpack.config.prod.js] 這两个文件, 但是我的就是没有生成,我的
demo1/package.json 文件如下:
{
"name": "demo1",
"version": "0.1.0",
"private": true,
"dependencies": {
"antd": "^3.11.6",
"less-loader": "^4.1.0",
"react": "^16.7.0",
"react-app-rewire-less": "^2.1.3",
"react-dom": "^16.7.0",
"react-router-dom": "^4.3.1",
"react-scripts": "2.1.2"
},
7, 然后修改 webpack.config.js 文件;
(1) 以前: const cssModuleRegex = /\.module\.css$/;
--> 修改成: const cssModuleRegex = /\.module\.(css|less)$/;
(2) 以前:
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
}),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
修改成: 加上 'less-loader'
{
test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders(
{
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'less-loader'
),
// Don't consider CSS imports dead code even if the
// containing package claims to have no side effects.
// Remove this when webpack adds a warning or an error for this.
// See https://github.com/webpack/webpack/issues/6571
sideEffects: true,
},
(3) 以前:
{
test: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
}),
},
修改后: 添加 'less-loader'
{
test: cssModuleRegex,
use: getStyleLoaders(
{
importLoaders: 1,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'less-loader'
),
},
8, 然后在 App.js 同目录下写一个 test.less
#testless {
color: red;
}
然后在 App.js 中引用就好了;
9, 最后在页面上可以看到效果, 就好了
参考博客: https://www.cnblogs.com/esofar/p/9631657.html
错误1:
错误: This git repository has untracked files or uncommitted changes:
错误解决: 到 项目根目录 /demo1 下面 先 git add .; 再 git commit -m "init"; 然后就可以 yarn run eject; 了
参考博客: http://react-china.org/t/create-react-app-npm-run-eject/22051/5
错误图片:
---恢复内容结束---
React 添加对 Less 的支持, 使用 create-react-app 脚手架的更多相关文章
- [React] Use the Fragment Short Syntax in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is upgrading to Ba ...
- [React] {svg, css module, sass} support in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr ...
- 利用 Create React Native App 快速创建 React Native 应用
本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...
- 深入 Create React App 核心概念
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...
- ABP 适用性改造 - 添加 API 版本化支持
Overview 在前面的文章里有针对 abp 的项目模板进行简化,构建了一个精简的项目模板,在使用过程中,因为我们暴露的 api 需要包含版本信息,我们采取的方式是将 api 的版本号包含在资源的 ...
- CentOS6.5 下在Nginx中添加SSL证书以支持HTTPS协议访问
参考文献: 1. NginxV1.8.0安装与配置 2. CentOS下在Nginx中添加SSL证书以支持HTTPS协议访问 3. nginx配置ssl证书的方法 4.nginx强制使用https访问 ...
- 第12章 添加对外部认证的支持 - Identity Server 4 中文文档(v1.0.0)
注意 对于任何先决条件(例如模板),首先要查看概述. 接下来,我们将添加对外部认证的支持.这非常简单,因为您真正需要的是ASP.NET Core兼容的身份验证处理程序. ASP.NET Core本身支 ...
- tap news:week5 0.0 create react app
参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...
随机推荐
- Oracle分析函数-keep(dense_rank first/last)
select * from criss_sales where dept_id = 'D02' order by sale_date ; 此时有个新需求,希望查看部门 D02 内,销售记录时间最早,销 ...
- JS -- serializeJSON
http://www.cnblogs.com/linzenews/p/7065050.html
- Mac下,如何把项目托管到github
以前一直使用的是svn,如下图: 附个下载链接:链接: https://pan.baidu.com/s/1nv6z5XJ 密码: pwqe:不太熟悉的小伙伴可以参考我写的一篇本地搭建svn服务器的博客 ...
- 使用PgBouncer连接池
1.pgbouncer 的介绍 pgbouncer是一个针对PostgreSQL数据库的轻量级连接池,任何目标应用都可以把 pgbouncer 当作一个 PostgreSQL/Greenplum 服务 ...
- JS 使用const声明常量的本质(很多人都有误解)
在我们使用const声明常量时,总认为值一旦声明就不可改变,其实是有误解的: 刚在看ES6标准文档时,仔细阅读了const的解析,恍然大悟的感觉,分享给大家. 本质 const实际上保证的,并不是变量 ...
- elasticsearch 6.1.1 transport jar
https://files.cnblogs.com/files/xjyggd/transport6.1.1.rar
- 不规则的JSON解析(一)
现有如下数据结构: { "orderId":"000001", "goodsId[0]":"001", &q ...
- 29、sass
SASS 一.SASS的作用: 方便编写CSS. 二.SASS依赖的环境 : Ruby 三.如何安装SASS? gem install sass gem update sass (更新sass) ge ...
- filter滤镜效果(css3属性)
<!DOCTYPE html> <html> <head> <style> img { width: 33%; height: auto; float: ...
- 使用 EF Core 的 EnableRetryOnFailure 解决短暂的数据库连接失败问题
阿里云服务器有时会出现短暂的连接不上数据库服务器(RDS)的问题,之前由于没有启用 Entity Framework Core 的失败重试功能(默认是禁用的),短暂的连接失败立马会引发下面的异常从而出 ...