1、首先我們先創(chuàng)建一個(gè)react項(xiàng)目，react官網(wǎng)也有react項(xiàng)目搭建的命令

npx create-react-app my-app
cd my-app

2、安裝我們項(xiàng)目需要的樣式依賴，這個(gè)項(xiàng)目我用的是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、打開(kāi)react的webpack配置

在node_modules下找到這個(gè)文件node_modules/react-scripts/config/webpack.config.dev.js  ?找到module下的rules，然后找到最后一個(gè)配置，修改成如下的樣子  

　　原來(lái)的

{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里面寫一些簡(jiǎn)單的ts代碼就可以run了

import React, { Component } from 'react';

import './App.scss';? ?//引入當(dāng)前文件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、運(yùn)行項(xiàng)目執(zhí)行命令： npm start? ?//切記 改node_modules里面的文件 要重啟一下項(xiàng)目

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/houjl/p/10088501.html

總結(jié)

以上是生活随笔為你收集整理的超简单的react和typescript和引入scss项目搭建流程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。