相关文章
TypeScript+React入门
TypeScript+React入门-----引入css
React+TypeScript入门-----BrowserRouter
在这个项目里引入css文件是非常简单的，只需要一行代码就可以实现了。
首先创建相关文件夹，在src下创建了两个文件夹，components文件夹用来存放各个组件，css文件夹用来存放css文件。
[图片上传失败...(image-2f239-1695891568126)]
然后写css相关代码，和传统的写法没有什么不同，在style.css内写你喜欢的样式就可以了，示例如下
.red-font{ color: #f00; font-size:20px;}
接着在components的tsx文件引入css，并导出这个组件
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渲染即可，是不是非常简单
import React from 'react';import ReactDOM from 'react-dom';import CssDemo from './components/cssDemo'; const render = () => { ReactDOM.render( <CssDemo/>, document.querySelector('#app') )}render();
更新一下，补上webpack配置
test: /\.css$/, use:[ 'style-loader', 'css-loader' ]
