Hướng dẫn import scss to reactjs - nhập scss vào reactjs
Ngày đăng:03/11/2022
Trả lời:0
Lượt xem:177
Đã đăng vào thg 9 20, 2019 3:15 SA 2 phút đọc 2 phút đọc
Chào các bạn,
SASS : 1 trong những CSS preprocessor rất phổ biến được nhiều developer sử dụng để viết CSS hiệu quả hơn và modular hơn với hàng loạt tính năng như nesting, variables, mixins, extends,... : 1 trong những CSS preprocessor rất phổ biến được nhiều developer sử dụng để viết CSS hiệu quả hơn và modular hơn với hàng loạt tính năng như nesting, variables, mixins, extends,...
create-react-app : 1 bộ react boilerplate và CLI được phát triển bởi chính cha đẻ của react - Facebook. Chỉ với 1 dòng command line đơn giản, bạn đã setup xong 1 react project được configured kĩ càng, support hầu hết các technologies cần thiết để bạn tập trung vào việc phát triển ứng dụng thay vì loay hoay với đống configs, setup. : 1 bộ react boilerplate và CLI được phát triển bởi chính cha đẻ của react - Facebook. Chỉ với 1 dòng command line đơn giản, bạn đã setup xong
1 react project được configured kĩ càng, support hầu hết các technologies cần thiết để bạn tập trung vào việc phát triển ứng dụng thay vì loay hoay với đống configs, setup.
Vậy tại sao chúng ta không sử dụng SASS cho styling kết hợp với React cho business logics?
Let's do that 😎
1. Setup SASS với create-react-app
Sau khi các bạn setup xong ứng dụng bằng create-react-app , chúng ta cần cài node-sass package - là 1 npm package giúp chúng ta compile sass sang css.
create-react-app new-app
cd new-app
npm install node-sass --save
Create React App 2 đã chính thức support SASS nên chúng ta không cần phải thay đổi thêm bất kì config gì nữa, hooray 🎉
2. Style React Component với SASS
Setup xong rồi, thử nó thôi. Ví dụ chúng ta có 1 component Menu để hiển thị danh sách các links của ứng dụng :
Có thể thấy, Menu component còn import thêm 1 file scss Menu.scss được sử dụng để styling.
Chú ý: Để tránh xảy ra các vấn đề về css overrides, cascade chúng ta nên có 1 class để wrap ( bao bọc ) hết component và style từng thành phần bên trong. ( xem ví dụ bên dưới để hiểu rõ hơn )
# Menu.scss
.Menu {
# Menu selector bao bọc các element con
# để tránh gây xung đột css với component khác.
background-color: bisque;ul {list-style: none;margin: 0;padding: 0;display: flex;justify-content: center;}li {margin: 10px 20px;}a {text-decoration: none;}a,
a:visited {color: #ffffff;}a:hover {color: lightseagreen;}}
Awesome! Sass còn rất nhiều tính năng mà bạn có thể tận dụng để productivity hơn, hiệu quả hơn trong việc styling React components. Sass còn rất nhiều tính năng mà bạn có thể tận dụng để productivity hơn, hiệu quả hơn trong việc styling React components.
Vẫn còn nhiều cách khác để styling ứng dụng React của bạn, phổ biến là styled-components và CSS Modules