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;

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

Nguồn: viblo.asia

Bài viết liên quan

9 Mẹo lập trình Web “ẩn mình” giúp tiết kiệm hàng giờ đồng hồ

Hầu hết các lập trình viên (kể cả những người giỏi) đều tốn thời gian x

Can GPT-4o Generate Images? All You Need to Know about GPT-4o-image

OpenAI‘s GPT-4o, introduced on March 25, 2025, has revolutionized the way we create visual con

Khi nào nên dùng main, section, article, header, footer, và aside trong HTML5

HTML5 đã giới thiệu các thẻ ngữ nghĩa giúp cấu trúc nội dung web một cách có

So sánh Webhook và API: Khi nào nên sử dụng?

Trong lĩnh vực công nghệ thông tin và phát triển phần mềm, Webhook và API là hai th