TypeScript+React入門-----引入css

相關文章

TypeScript+React入門
TypeScript+React入門-----引入css
React+TypeScript入門-----BrowserRouter
在這個項目裏引入css文件是很是簡單的，只須要一行代碼就能夠實現了。
首先建立相關文件夾，在src下建立了兩個文件夾，components文件夾用來存放各個組件，css文件夾用來存放css文件。

而後寫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'                    
                ]