Trong thế giới chuyển động nhanh ngày nay, việc biết Sass là một phần quan trọng trong quá trình phát triển web — cho dù bạn đang làm việc trên React, Angular hay bất kỳ framework nào khác
Nếu bạn chưa quen với Sass, bạn có thể tìm hiểu các nguyên tắc cơ bản trong bài viết trước của tôi
Trong bài viết này, chúng ta sẽ khám phá cách bắt đầu với Sass trong ứng dụng React
Để bắt đầu, hãy sao chép kho lưu trữ mà chúng tôi đã tạo trong bài viết này, mô tả cách thiết lập webpack và babel cho React từ đầu
Khi kho lưu trữ được sao chép, hãy thực hiện lệnh sau từ dấu nhắc lệnh hoặc thiết bị đầu cuối
npm install style-loader@1.1.3 css-loader@3.4.2 sass-loader@8.0.2 node-sass@4.13.1
Mở webpack.config.js
và thêm một đối tượng mới để chỉ định bộ tải
{
test: /\.[scss|css]$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
1. Điều kiện kiểm tra thông báo cho webpack chỉ tìm các tệp kết thúc bằng. scss hoặc. css
2. sass-loader
sẽ sử dụng nội bộ node-sass
[mà chúng tôi đã cài đặt ở trên] để chuyển đổi tệp SCSS thành tệp CSS
3. css-loader
sẽ giải quyết việc nhập tệp css mà chúng tôi sẽ nhập vào tệp JavaScript
4. style-loader
sẽ lấy tất cả mã CSS và thêm thẻ style
bên trong thẻ
{
test: /\.[scss|css]$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
0 của tệp HTMLGhi chú. Các bộ tải bên trong mảng
{
test: /\.[scss|css]$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
1 chỉ phải theo thứ tự này['style-loader', 'css-loader', 'sass-loader']
Nó sẽ được đánh giá từ phải sang trái, vì vậy đầu tiên sass-loader
sẽ thực hiện công việc của nó, sau đó là css-loader
, và cuối cùng là style-loader
Bây giờ hãy tạo một tệp mới có tên
{
test: /\.[scss|css]$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
5 bên trong thư mục SRC/CSS với CSS sauMở
{
test: /\.[scss|css]$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
6 và nhập tệp {
test: /\.[scss|css]$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
5 sau khi nhập {
test: /\.[scss|css]$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
8import './css/main.scss';
Bây giờ hãy bắt đầu ứng dụng của bạn bằng cách chạy lệnh
{
test: /\.[scss|css]$/,
use: ['style-loader', 'css-loader', 'sass-loader']
}
9 từ dấu nhắc lệnh hoặc thiết bị đầu cuốiĐáng kinh ngạc. Bây giờ bạn có thể bắt đầu sử dụng tất cả các tính năng tuyệt vời do Sass cung cấp trong React
Ghi chú. Nếu bạn đang dùng
['style-loader', 'css-loader', 'sass-loader']
0 thì để làm việc với sass bạn chỉ cần cài đặt gói npm ['style-loader', 'css-loader', 'sass-loader']
1. Không cần bất kỳ cấu hình bộ tải hoặc babel nào. Ứng dụng tạo phản ứng sẽ xử lý việc đó cho bạnXem mã nguồn hoàn chỉnh trên GitHub
Điều này là dành cho hôm nay. Tôi hy vọng bạn đã học được một cái gì đó mới
Đừng quên đăng ký để nhận bản tin hàng tuần của tôi với các mẹo, thủ thuật và bài viết tuyệt vời trực tiếp trong hộp thư đến của bạn tại đây
Đối với phiên bản cập nhật nhất của bài viết này. https. // esausilva. com/2020/07/23/how-to-use-sass-and-css-modules-with-create-react-app-cra/
Cho đến khi phát hành ứng dụng tạo-phản ứng v2, nếu bạn muốn đưa các Mô-đun Sass hoặc CSS vào dự án của mình, bạn sẽ phải loại bỏ khỏi ứng dụng tạo-phản ứng, tìm hiểu cấu hình Webpack, cài đặt trình tải Sass và tự định cấu hình nó
Ảnh của Vernon Raineil Cenzon trên Bapt
không còn nữa. Nhóm tại Facebook đã phát hành ứng dụng tạo phản ứng v2 và trong số nhiều cải tiến, họ đã cho chúng tôi khả năng sử dụng Mô-đun Sass và CSS ngay lập tức và trong hướng dẫn này, bạn sẽ tìm hiểu cách đơn giản để đưa chúng vào
Hãy tạo một dự án đơn giản để chứng minh điều này
Mẹo. Sử dụng Bit để xây dựng nhanh hơn với các thành phần. Nó giúp nhóm của bạn chia sẻ và tái sử dụng các thành phần, đồng thời sử dụng chúng để xây dựng các ứng dụng mới. Hãy thử một lần
Hợp tác và khám phá thành phần · Bit
Bit là nơi các nhà phát triển chia sẻ các thành phần và hợp tác để cùng nhau xây dựng phần mềm tuyệt vời. Khám phá các thành phần được chia sẻ…
chút. nhà phát triển
Phản ứng spinners với Bit. Chọn, Chơi, Cài đặt
Bắt Sassy với Sass
Đầu tiên tạo một dự án mới với
yarn add node-sass
6 mới nhất. Tôi sẽ gọi cho tôi là yarn add node-sass
7npx create-react-app cra-sass
Qua một bên. Nếu bạn không chắc chắn về
yarn add node-sass
8 là gì hoặc nó làm gì, thì về cơ bản, nó sử dụng các gói mới nhất từ sổ đăng ký npm, vì vậy bạn không cần cài đặt cục bộ yarn add node-sass
6Bạn sẽ cần một phụ thuộc mới để hỗ trợ Sass. Cài đặt
yarn start
0 [bên trong dự án yarn add node-sass
7]yarn add node-sass
Bây giờ đổi tên
yarn start
2 thành yarn start
3Khi đã xong, hãy mở
yarn start
4 và ở dòng 3, bạn sẽ tìm thấy yarn start
5. Thay đổi nó thành yarn start
6Tại thời điểm này, bạn có thể chạy ứng dụng
yarn start
Bạn sẽ thấy mẫu mặc định được tạo bởi ứng dụng tạo phản ứng trông rất đẹp
Mẫu mặc định của CRA
Hãy tạo một tệp Sass khác và đặt tên là
yarn start
7 trong thư mục yarn start
8Mở tệp Sass mới tạo này và sao chép phần sau
$primary-color: #282c34;
$secondary-color: #61dafb;
Bây giờ hãy mở
yarn start
9 và sửa đổi nó như sau [các cập nhật được in đậm]@import './variables.scss';.App {
text-align: center;
}.App-logo {
animation: App-logo-spin infinite 20s linear;
height: 40vmin;
}.App-header {
background-color: $primary-color;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc[10px + 2vmin];
color: white;
}.App-link {
color: $secondary-color;
}@keyframes App-logo-spin {
from {
transform: rotate[0deg];
}
to {
transform: rotate[360deg];
}
}
Như bạn có thể thấy, chúng tôi đang nhập
yarn start
7 và các biến chúng tôi đã tạo cho màu nền và màu liên kếtNếu bạn đã dừng ứng dụng, hãy tiếp tục và chạy lại ứng dụng đó [
$primary-color: #282c34;
$secondary-color: #61dafb;
1]. Nếu bạn không dừng ứng dụng, hãy truy cập trình duyệt của bạn và bạn sẽ thấy ứng dụng vẫn giống như trước đây. Đó là bởi vì chúng tôi chỉ trích xuất các màu thành một tệp riêng 😄Với ý nghĩ đó, giờ đây bạn có toàn bộ sức mạnh của Sass trong ứng dụng tạo-phản ứng mà không cần phải loại bỏ và mất hỗ trợ cho bất kỳ bản cập nhật nào trong tương lai cho dự án
Nhưng chờ đợi, có nhiều hơn nữa. Khi bạn xây dựng ứng dụng, ứng dụng tạo phản ứng sẽ sử dụng PostCSS với plugin Autoprefixer để tự động thêm các tiền tố nhà cung cấp bắt buộc
Điều này hoạt động với danh sách trình duyệt trong
$primary-color: #282c34;
$secondary-color: #61dafb;
2 của bạn. Theo mặc định, ứng dụng tạo phản ứng có cấu hình sau"browserslist": [
">0.2%",
"not dead",
"not ie 0.2%",
"not dead",
"not ie 0.2%",
"not dead",
"not ie 0.2%",
"not dead",
"not ie 0.2%",
"not dead",
"not ie