相關(guān)文章

TypeScript+React入門
TypeScript+React入門-----引入css
React+TypeScript入門-----BrowserRouter
在這個(gè)項(xiàng)目里引入css文件是非常簡(jiǎn)單的，只需要一行代碼就可以實(shí)現(xiàn)了。
首先創(chuàng)建相關(guān)文件夾，在src下創(chuàng)建了兩個(gè)文件夾，components文件夾用來存放各個(gè)組件，css文件夾用來存放css文件。
[圖片上傳失敗...(image-2f239-1695891568126)]

然后寫css相關(guān)代碼，和傳統(tǒng)的寫法沒有什么不同，在style.css內(nèi)寫你喜歡的樣式就可以了，示例如下

.red-font{    color: #f00;    font-size:20px;}

接著在components的tsx文件引入css，并導(dǎo)出這個(gè)組件

import React from 'react';import '../css/style.css'export default class CssDemo extends React.Component{    render(){        return <div className="red-font">            red font        </div>    }}

最后一步，在你的入口文件引入CssDemo渲染即可，是不是非常簡(jiǎn)單

 import  React from 'react';import  ReactDOM from 'react-dom';import CssDemo from './components/cssDemo'; const render = () => {    ReactDOM.render(                       <CssDemo/>,        document.querySelector('#app')    )}render();

更新一下，補(bǔ)上webpack配置

                test: /\.css$/,                use:[                    'style-loader',                    'css-loader'                                    ]