超简单的react和typescript和引入scss项目搭建流程
1、首先我们先创建一个react项目,react官网也有react项目搭建的命令
npx create-react-app my-app
cd my-app
2、安装我们项目需要的样式依赖,这个项目我用的是scss
npm install node-sass -D
3、安装typescript的依赖命令
npm install typescript @types/node @types/react @types/react-dom @types/jest
4、安装sass-loader和node-sass依赖
npm install sass-loader node-sass --save-dev
5、打开react的webpack配置
在node_modules下找到这个文件node_modules/react-scripts/config/webpack.config.dev.js 找到module下的rules,然后找到最后一个配置,修改成如下的样子
原来的
{
loader: require.resolve('file-loader'),
// Exclude `js` files to keep "css" loader working as it injects
// its runtime that would otherwise be processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
}
改之后的
{
exclude: [/\.js$/,/\.html$/,/\.json$/,/\.scss$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
{
test:/\.scss$/,
loaders:['style-loader','css-loader','sass-loader']
},
6、将src里面的文件改为这样,并将App.js改为App.tsx
index.js代码如下:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; ReactDOM.render(<App />, document.getElementById('root'));
7、在App.tsx里面写一些简单的ts代码就可以run了
import React, { Component } from 'react';
interface Props { }
interface State {
list: string,
}
class App extends Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = {
list: 'hello world!!!'
}
}
render() {
return (
);
}
}
export default App;
7、App.scss代码如下
.content{
width: 500px;
height: 500px;
background-color: pink;
margin: 0 auto;
text-align: center;
line-height: 500px;
.bth{
color: blue;
}
}
7、运行项目执行命令: npm start //切记 改node_modules里面的文件 要重启一下项目
超简单的react和typescript和引入scss项目搭建流程的更多相关文章
- 【已解决】React中配置Sass引入.scss文件无效
React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...
- React中配置Sass引入.scss文件无效
React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules文 ...
- 超简单!asp.net core前后端分离项目使用gitlab-ci持续集成到IIS
现在好多使用gitlab-ci的持续集成的教程,大部分都是发布到linux系统上的,但是目前还是有很大一部分企业使用的都是windows系统使用IIS在部署.NET应用程序.这里写一下如何使用gitl ...
- 转载 初学者必看——最简单最清晰的Struts2项目搭建流程
https://blog.csdn.net/key0323/article/details/50773499 在项目中想要使用Struts2框架,我该怎么做?从哪里开始?这是我的疑惑,我想也是很多初学 ...
- React学习(1)—— 基础项目搭建以及环境配置
首先,我们需要安装node.js,直接搜索并在官网下载安装包. node.js官网:https://nodejs.org/en/ 现在我们成功安装了node和npm,然后我们来用npm创建新的项目,首 ...
- 一个简单的Java Web项目搭建流程
今天试图在服务器上搭建一个web服务器,顺便回顾了java web项目的入门,使用Servlet处理HTTP请求,并记录日志等操作.当很久没有做过web项目时,有些东西还是很容易忘记的. Maven配 ...
- 从零配置webpack(react+less+typescript+mobx)
本文目标 从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y ...
- React与Typescript整合
0. Typescript Typescript对于前端来说可以说是越来越重要了,前端的很多项目都用Typescript进行了重构.这主要得益于Typescript有比较好的类型支持,在编码的过程中可 ...
- ssh框架整合---- spring 4.0 + struts 2.3.16 + maven ss整合超简单实例
一 . 需求 学了这么久的ssh,一直都是别人整合好的框架去写代码,自己实际动手时才发现框架配置真是很坑爹,一不小心就踏错,真是纸上得来终觉浅! 本文将记录整合struts + spring的过程 , ...
随机推荐
- 【转】.NET Core 事件总线,分布式事务解决方案:CAP
[转].NET Core 事件总线,分布式事务解决方案:CAP 背景 相信前面几篇关于微服务的文章也介绍了那么多了,在构建微服务的过程中确实需要这么一个东西,即便不是在构建微服务,那么在构建分布式应用 ...
- lambda表达式格式以及应用场景?
lambda表达式,通常是在需要一个函数,但是又不想费神去命名一个函数的场合下使用,也就是指匿名函数. add = lambda x, y : x+y print(add(1,2)) # 结果为3 应 ...
- 五.python小数据池,代码块的最详细、深入剖析
一,id,is,== 在Python中,id是什么?id是内存地址,那就有人问了,什么是内存地址呢? 你只要创建一个数据(对象)那么都会在内存中开辟一个空间,将这个数据临时加在到内存中,那么这个空间是 ...
- 树莓派3 有线网卡静态IP设置
步骤: 1.使用SSH登陆树莓派,第一连接可使用鼠标+键盘+显示器直接进入树莓派界面设置无线连接. 2.更新软件: sudo apt-get update 3.安装vim:系统自带的vi非常不好用,使 ...
- L1025
1,对于搜索,我有一个不成熟的想法,这不就是,强化版的for循环吗? 2,反正是搜索,那就先找搜索状态, n,x,n是第几次分,x是分剩下的数. 3,这个我觉得自己努力努力可能可以做出来. 4,首先要 ...
- Linux下搭建iSCSI共享存储的方法 Linux-IO Target 方式CentOS7-1810下实现
iSCSI(internet SCSI)技术由IBM公司研究开发,是一个供硬件设备使用的.可以在IP协议的上层运行的SCSI指令集,这种指令集合可以实现在IP网络上运行SCSI协议,使其能够在诸如高速 ...
- 洛谷P3147 262144
题目 此题数据范围小的话可以用区间\(DP\),但是该题目的数据范围并不能用区间DP来求解,因此我们考虑优化\(DP\). 每个数的生成一定是由这两个区间 考虑区间DP的弊端是并不知道每个数生成的区间 ...
- SpringBoot:关于默认连接池Hikari的源码剖析
1.起因 因为这两天在给公司的一个项目升级SpringBoot版本,遇到了一些坑,升级项目版本:SpringBoot1.5.x到SpringBoot2.0.x 今天早上双库操作遇到一个问题:jdbcU ...
- 【算法编程 C++ Python】二维数组查找
题目: 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 思路: 最简单:每一行都 ...
- 安装与配置HSDIS与JITWatch
本作者的系统: 操作系统版本及位数可通过uname -a命令查看,如下: Linux ubuntu 3.13.0-32-generic #57~precise1-Ubuntu SMP Tue Jul ...