使用 create-react-app 配置 react 开发环境,像下面这样,就可以构建一个新的 react 单页面应用,非常方便。

npm install -g create-react-app
create-react-app my-app cd my-app
npm start

但是, 去掉了默认支持Sass等预处理器,和默认的JQ库。

添加JQ库

1.安装jq库 npm install --save-dev jquery

2.在入口js 文件中引入 import $ from 'jquery';

添加sass处理文件

1.首先安装依赖:npm install sass-loader node-sass --save-dev

2.找到node_modules/react-scripts/config/webpack.config.dev.js文件和webpack.config.prod.js文件(两个文件都要改)

将module配置项的最后一项配置改成如下

{ loader: require.resolve('file-loader'),

loaders. exclude: [/\.js$/, /\.html$/, /\.json$/,/\.scss$/],

options: { name: 'static/media/[name].[hash:8].[ext]',

},

},

{ test: /\.scss$/, loaders: ['style-loader', 'css-loader', 'sass-loader'], }

3.在入口js 文件中引入:import './test.scss';

4.在package.json中srcipt 引入:build-css ,watch-css

"scripts": {
"build-css": "node-sass-chokidar src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},

在create-react-app创建的React项目应用中配置JQ、Sass的更多相关文章

  1. React脚手架创建一个React应用以及项目目录结构详解

    react脚手架 用来帮助程序员快速创建一个基于xxx库的模板项目,包含了所有需要的配置,指定好了所有的依赖,可以直接安装/编译/运行一个简单效果 react提供了一个专门用于创建react项目的脚手 ...

  2. react:如何创建一个新项目

    如何用react创建一个新的项目 我们打开react官网:https://reactjs.org/docs/create-a-new-react-app.html 看到以下命令 npx create- ...

  3. 深入 Create React App 核心概念

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

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

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

  5. 【React Native开发】React Native控件之Image组件解说与美团首页顶部效果实例(10)

    ),React Native技术交流4群(458982758),欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! Im ...

  6. MyBatis创建第二个项目

    MyBatis创建第二个项目 Mysql文件配置 /* Navicat Premium Data Transfer​ Source Server         : Mybatis Source Se ...

  7. Web API使用记录系列(一)创建API项目与基本配置

    本系列文章主要记录Web API使用过程中的一些个人总结,包括创建API项目.基础配置.ApiTestClient使用与HelpPage页面的优化.Owin与OAuth的使用等. 本节主要内容是API ...

  8. 如何用 React Native 创建一个iOS APP?(三)

    前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...

  9. 如何用 React Native 创建一个iOS APP?(二)

    我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...

随机推荐

  1. Centos操作系统配置VIP以及网络

    打开虚拟机的网络配置文件 vi /etc/sysconfig/network-script/ifc*** (具体文件根据情况自行填写) 编辑这个文件添加入如下配置 IPADDR=ip地址 (添加VIP ...

  2. Unit Vector Compression

    Recently, I compared a few methods for compressing generic unit vectors. The method used in Cry Engi ...

  3. hdu5693 D game&&hdu 5712 D++ game

    题目链接:5693 题目链接:5712 对于这个D game.注意消除之后两遍的序列是可以拼合到一起的!我们可以想到有区间DP的做法.我们设\(f[i][j]\)表示区间i,j可以被消除. 显然如果这 ...

  4. 用Visual Studio 2015成功编译、发布UMDF驱动到目标机!!

    开发工具:Visual Studio 2015企业版 主      机:windows10 X64企业版,主机是安装了Visual Studio 2015的操作系统,主要进行驱动开发和调试. 目  标 ...

  5. django admin的自定制

    from django.contrib import admin # Register your models here. from .models import * from django.util ...

  6. maven+eclipse+ssm 环境搭建和启动

    该类工程环境搭建和启动方法 ------------------------------------------------------------------------------- 配置 jdk ...

  7. Java面向对象之异常(throw与throws)

    一.基础概念 1.throw和throws的区别: 位置不同:throws用在函数上,后面跟的是异常类,可以跟多个. throw用在函数内,后面跟的是异常对象. 功能不同:throws用来声明异常,让 ...

  8. 剑指offer面试题1---赋值运算符函数

    题目描述:如下类型CMyString的声明,请为该类型添加赋值运算符函数. class CMyString{public:    CMyString(char* pData = NULL);    C ...

  9. css盒子模型基础,margin-top塌陷,元素溢出

    现在布局不用table,一般用盒子模型来布局,也就是通常说的div+css,一个页面就是多个盒子的拼接   一. 初识盒子模型   例子1,测试盒子各属性设置   <head> <s ...

  10. HTML5 调用百度地图API地理定位

    <!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...