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

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

我的电脑:  系统: 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. dubbo的服务发现和注册如何实现

    Dubbo通常我们是如何使用的? #================================================================================== ...

  2. Spring Boot 调用 MongoRepository时报org.springframework.beans.factory.NoSuchBeanDefinitionException错误的解决办法

    这个问题整整折腾了我两天,现在记录下来,希望可以帮助和我一样,遇到相同问题的小伙伴. 项目是分层的(Intellij IDEA中的模块Module),有API(Core)层,Service&D ...

  3. 简单的 FastDFS + Nginx 应用实例

    版权声明:本文为GitChat作者的原创文章,未经 GitChat 同意不得转载. https://blog.csdn.net/GitChat/article/details/79479148 wx_ ...

  4. laravel5.8笔记四:路由

    laravel框架,必须先设置路由,才可以访问内部的控制器部分. 路由文件:routes/web.php. 基本路由 Route::get('/user', 'UserController@index ...

  5. linux下的抓包工具tcpdump

    1.由netstat查看网络情况,引出的TCP建立连接.终止连接过程,以及TCP状态分析: 2.Soap=XML+HTTP引出的HTTP协议分析: 3.Soap(Simple Object Acces ...

  6. ubuntu源码安装jdk8

    最近学习java,想起来没有在Ubuntu上使用过 因此想安装下环境,并在Ubuntu上试用MPXJ读取mpp文件 1.安装 下载jdk8 https://www.oracle.com/technet ...

  7. mysql查看连接数排查问题

    #mysql查看连接数SHOW VARIABLES LIKE '%max_connections%'; # max_connections 最大连接数 SHOW VARIABLES LIKE '%co ...

  8. exists oracle 的用法

    CREATE TABLE `A` ( `id` ) NOT NULL AUTO_INCREMENT, `name` ) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGIN ...

  9. python 多文件知识

    对于一个大型的项目,会存在很多个py文件,本文记录与多文件有关的内容. 1. python 如何在一个.py文件中调用另一个.py文件的类 如果是在同一个 module中(也就是同一个py 文件里), ...

  10. 【Java核心技术】类型信息(Class对象 反射 动态代理)

    1 Class对象 理解RTTI在Java中的工作原理,首先需要知道类型信息在运行时是如何表示的,这是由Class对象来完成的,它包含了与类有关的信息.Class对象就是用来创建所有“常规”对象的,J ...