在create-react-app创建的React项目应用中配置JQ、Sass
使用 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
在create-react-app创建的React项目应用中配置JQ、Sass的更多相关文章
- React脚手架创建一个React应用以及项目目录结构详解
react脚手架 用来帮助程序员快速创建一个基于xxx库的模板项目,包含了所有需要的配置,指定好了所有的依赖,可以直接安装/编译/运行一个简单效果 react提供了一个专门用于创建react项目的脚手 ...
- react:如何创建一个新项目
如何用react创建一个新的项目 我们打开react官网:https://reactjs.org/docs/create-a-new-react-app.html 看到以下命令 npx create- ...
- 深入 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 ...
- 【React Native开发】React Native控件之Image组件解说与美团首页顶部效果实例(10)
),React Native技术交流4群(458982758),欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! Im ...
- MyBatis创建第二个项目
MyBatis创建第二个项目 Mysql文件配置 /* Navicat Premium Data Transfer Source Server : Mybatis Source Se ...
- Web API使用记录系列(一)创建API项目与基本配置
本系列文章主要记录Web API使用过程中的一些个人总结,包括创建API项目.基础配置.ApiTestClient使用与HelpPage页面的优化.Owin与OAuth的使用等. 本节主要内容是API ...
- 如何用 React Native 创建一个iOS APP?(三)
前两部分,<如何用 React Native 创建一个iOS APP?>,<如何用 React Native 创建一个iOS APP (二)?>中,我们分别讲了用 React ...
- 如何用 React Native 创建一个iOS APP?(二)
我们书接上文<如何用 React Native 创建一个iOS APP?>,继续来讲如何用 React Native 创建一个iOS APP.接下来,我们会涉及到很多控件. 1 AppRe ...
随机推荐
- Centos操作系统配置VIP以及网络
打开虚拟机的网络配置文件 vi /etc/sysconfig/network-script/ifc*** (具体文件根据情况自行填写) 编辑这个文件添加入如下配置 IPADDR=ip地址 (添加VIP ...
- Unit Vector Compression
Recently, I compared a few methods for compressing generic unit vectors. The method used in Cry Engi ...
- hdu5693 D game&&hdu 5712 D++ game
题目链接:5693 题目链接:5712 对于这个D game.注意消除之后两遍的序列是可以拼合到一起的!我们可以想到有区间DP的做法.我们设\(f[i][j]\)表示区间i,j可以被消除. 显然如果这 ...
- 用Visual Studio 2015成功编译、发布UMDF驱动到目标机!!
开发工具:Visual Studio 2015企业版 主 机:windows10 X64企业版,主机是安装了Visual Studio 2015的操作系统,主要进行驱动开发和调试. 目 标 ...
- django admin的自定制
from django.contrib import admin # Register your models here. from .models import * from django.util ...
- maven+eclipse+ssm 环境搭建和启动
该类工程环境搭建和启动方法 ------------------------------------------------------------------------------- 配置 jdk ...
- Java面向对象之异常(throw与throws)
一.基础概念 1.throw和throws的区别: 位置不同:throws用在函数上,后面跟的是异常类,可以跟多个. throw用在函数内,后面跟的是异常对象. 功能不同:throws用来声明异常,让 ...
- 剑指offer面试题1---赋值运算符函数
题目描述:如下类型CMyString的声明,请为该类型添加赋值运算符函数. class CMyString{public: CMyString(char* pData = NULL); C ...
- css盒子模型基础,margin-top塌陷,元素溢出
现在布局不用table,一般用盒子模型来布局,也就是通常说的div+css,一个页面就是多个盒子的拼接 一. 初识盒子模型 例子1,测试盒子各属性设置 <head> <s ...
- HTML5 调用百度地图API地理定位
<!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...