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';
 import './App.scss';   //引入当前文件scss
interface Props {

}
interface State {
list: string,
}
class App extends Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = {
list: 'hello world!!!'
}
}
render() {
return (
      <div className="content">
        <div className="btn">{this.state.list}</div>
      </div>
    );
}
}
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项目搭建流程的更多相关文章

  1. 【已解决】React中配置Sass引入.scss文件无效

    React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules ...

  2. React中配置Sass引入.scss文件无效

    React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules文 ...

  3. 超简单!asp.net core前后端分离项目使用gitlab-ci持续集成到IIS

    现在好多使用gitlab-ci的持续集成的教程,大部分都是发布到linux系统上的,但是目前还是有很大一部分企业使用的都是windows系统使用IIS在部署.NET应用程序.这里写一下如何使用gitl ...

  4. 转载 初学者必看——最简单最清晰的Struts2项目搭建流程

    https://blog.csdn.net/key0323/article/details/50773499 在项目中想要使用Struts2框架,我该怎么做?从哪里开始?这是我的疑惑,我想也是很多初学 ...

  5. React学习(1)—— 基础项目搭建以及环境配置

    首先,我们需要安装node.js,直接搜索并在官网下载安装包. node.js官网:https://nodejs.org/en/ 现在我们成功安装了node和npm,然后我们来用npm创建新的项目,首 ...

  6. 一个简单的Java Web项目搭建流程

    今天试图在服务器上搭建一个web服务器,顺便回顾了java web项目的入门,使用Servlet处理HTTP请求,并记录日志等操作.当很久没有做过web项目时,有些东西还是很容易忘记的. Maven配 ...

  7. 从零配置webpack(react+less+typescript+mobx)

    本文目标 从零搭建出一套支持react+less+typescript+mobx的webpack配置 最简化webpack配置 首页要初始化yarn和安装webpack的依赖 yarn init -y ...

  8. React与Typescript整合

    0. Typescript Typescript对于前端来说可以说是越来越重要了,前端的很多项目都用Typescript进行了重构.这主要得益于Typescript有比较好的类型支持,在编码的过程中可 ...

  9. ssh框架整合---- spring 4.0 + struts 2.3.16 + maven ss整合超简单实例

    一 . 需求 学了这么久的ssh,一直都是别人整合好的框架去写代码,自己实际动手时才发现框架配置真是很坑爹,一不小心就踏错,真是纸上得来终觉浅! 本文将记录整合struts + spring的过程 , ...

随机推荐

  1. 【转】.NET Core 事件总线,分布式事务解决方案:CAP

    [转].NET Core 事件总线,分布式事务解决方案:CAP 背景 相信前面几篇关于微服务的文章也介绍了那么多了,在构建微服务的过程中确实需要这么一个东西,即便不是在构建微服务,那么在构建分布式应用 ...

  2. lambda表达式格式以及应用场景?

    lambda表达式,通常是在需要一个函数,但是又不想费神去命名一个函数的场合下使用,也就是指匿名函数. add = lambda x, y : x+y print(add(1,2)) # 结果为3 应 ...

  3. 五.python小数据池,代码块的最详细、深入剖析

    一,id,is,== 在Python中,id是什么?id是内存地址,那就有人问了,什么是内存地址呢? 你只要创建一个数据(对象)那么都会在内存中开辟一个空间,将这个数据临时加在到内存中,那么这个空间是 ...

  4. 树莓派3 有线网卡静态IP设置

    步骤: 1.使用SSH登陆树莓派,第一连接可使用鼠标+键盘+显示器直接进入树莓派界面设置无线连接. 2.更新软件: sudo apt-get update 3.安装vim:系统自带的vi非常不好用,使 ...

  5. L1025

    1,对于搜索,我有一个不成熟的想法,这不就是,强化版的for循环吗? 2,反正是搜索,那就先找搜索状态, n,x,n是第几次分,x是分剩下的数. 3,这个我觉得自己努力努力可能可以做出来. 4,首先要 ...

  6. Linux下搭建iSCSI共享存储的方法 Linux-IO Target 方式CentOS7-1810下实现

    iSCSI(internet SCSI)技术由IBM公司研究开发,是一个供硬件设备使用的.可以在IP协议的上层运行的SCSI指令集,这种指令集合可以实现在IP网络上运行SCSI协议,使其能够在诸如高速 ...

  7. 洛谷P3147 262144

    题目 此题数据范围小的话可以用区间\(DP\),但是该题目的数据范围并不能用区间DP来求解,因此我们考虑优化\(DP\). 每个数的生成一定是由这两个区间 考虑区间DP的弊端是并不知道每个数生成的区间 ...

  8. SpringBoot:关于默认连接池Hikari的源码剖析

    1.起因 因为这两天在给公司的一个项目升级SpringBoot版本,遇到了一些坑,升级项目版本:SpringBoot1.5.x到SpringBoot2.0.x 今天早上双库操作遇到一个问题:jdbcU ...

  9. 【算法编程 C++ Python】二维数组查找

    题目: 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. 思路: 最简单:每一行都 ...

  10. 安装与配置HSDIS与JITWatch

    本作者的系统: 操作系统版本及位数可通过uname -a命令查看,如下: Linux ubuntu 3.13.0-32-generic #57~precise1-Ubuntu SMP Tue Jul ...