---恢复内容开始---

参考博客与我自己的当前版本有一点出入, 所以就将 参考博客写到文章后面去了。

我的电脑:  系统: 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 脚手架的更多相关文章

  1. [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 ...

  2. [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  ...

  3. 利用 Create React Native App 快速创建 React Native 应用

    本文介绍的 Create-React-Native-App 是非常 Awesome 的工具,而其背后的 Expo 整个平台也让笔者感觉非常的不错.笔者目前公司是采用 APICloud 进行移动应用开发 ...

  4. 深入 Create React App 核心概念

    本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...

  5. 在 .NET Core 5 中集成 Create React app

    翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] Camilo Reyes ...

  6. ABP 适用性改造 - 添加 API 版本化支持

    Overview 在前面的文章里有针对 abp 的项目模板进行简化,构建了一个精简的项目模板,在使用过程中,因为我们暴露的 api 需要包含版本信息,我们采取的方式是将 api 的版本号包含在资源的 ...

  7. CentOS6.5 下在Nginx中添加SSL证书以支持HTTPS协议访问

    参考文献: 1. NginxV1.8.0安装与配置 2. CentOS下在Nginx中添加SSL证书以支持HTTPS协议访问 3. nginx配置ssl证书的方法 4.nginx强制使用https访问 ...

  8. 第12章 添加对外部认证的支持 - Identity Server 4 中文文档(v1.0.0)

    注意 对于任何先决条件(例如模板),首先要查看概述. 接下来,我们将添加对外部认证的支持.这非常简单,因为您真正需要的是ASP.NET Core兼容的身份验证处理程序. ASP.NET Core本身支 ...

  9. tap news:week5 0.0 create react app

    参考https://blog.csdn.net/qtfying/article/details/78665664 先创建文件夹 安装create react app 这个脚手架(facebook官方提 ...

随机推荐

  1. Oracle分析函数-keep(dense_rank first/last)

    select * from criss_sales where dept_id = 'D02' order by sale_date ; 此时有个新需求,希望查看部门 D02 内,销售记录时间最早,销 ...

  2. JS -- serializeJSON

    http://www.cnblogs.com/linzenews/p/7065050.html

  3. Mac下,如何把项目托管到github

    以前一直使用的是svn,如下图: 附个下载链接:链接: https://pan.baidu.com/s/1nv6z5XJ 密码: pwqe:不太熟悉的小伙伴可以参考我写的一篇本地搭建svn服务器的博客 ...

  4. 使用PgBouncer连接池

    1.pgbouncer 的介绍 pgbouncer是一个针对PostgreSQL数据库的轻量级连接池,任何目标应用都可以把 pgbouncer 当作一个 PostgreSQL/Greenplum 服务 ...

  5. JS 使用const声明常量的本质(很多人都有误解)

    在我们使用const声明常量时,总认为值一旦声明就不可改变,其实是有误解的: 刚在看ES6标准文档时,仔细阅读了const的解析,恍然大悟的感觉,分享给大家. 本质 const实际上保证的,并不是变量 ...

  6. elasticsearch 6.1.1 transport jar

    https://files.cnblogs.com/files/xjyggd/transport6.1.1.rar

  7. 不规则的JSON解析(一)

    现有如下数据结构: {   "orderId":"000001",   "goodsId[0]":"001",   &q ...

  8. 29、sass

    SASS 一.SASS的作用: 方便编写CSS. 二.SASS依赖的环境 : Ruby 三.如何安装SASS? gem install sass gem update sass (更新sass) ge ...

  9. filter滤镜效果(css3属性)

    <!DOCTYPE html> <html> <head> <style> img { width: 33%; height: auto; float: ...

  10. 使用 EF Core 的 EnableRetryOnFailure 解决短暂的数据库连接失败问题

    阿里云服务器有时会出现短暂的连接不上数据库服务器(RDS)的问题,之前由于没有启用 Entity Framework Core 的失败重试功能(默认是禁用的),短暂的连接失败立马会引发下面的异常从而出 ...