Bài 3: Cấu hình scss vào dự án

1. Tạo file GlobalStyles component

1.1 Tạo file src/components/GlobalStyles/index.tsx

import './GlobalStyles.scss';

type Props = {
    children: JSX.Element;
};

function GlobalStyles({ children }: Props) {
    return children;
}

export default GlobalStyles;

1.2 Tạo file src/components/GlobalStyles/GlobalStyles.scss

@import 'normalize.css';
@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected];400;500;700;900&display=swap');

:root {
    --primary: #fe2c55;
}

html {
    font-size: 62.5%;
}

body {
    font-family: 'Roboto', sans-serif;
    font-size: 1.6rem;
    line-height: 1.5;
    text-rendering: optimizespeed;
}

2. Cài thư viện reset css và scss

yarn add --save normalize.css
yarn add sass

3. Sửa lại file index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from '~/App';
import GlobalStyles from '~/components/GlobalStyles';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
    <React.StrictMode>
        <GlobalStyles>
            <App />
        </GlobalStyles>
    </React.StrictMode>,
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

4. Xoá các file ko cần thiết như index.css. logo, app.css