Tôi có thể nhập scss trong phản ứng không?

Question

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ội dung chính Show

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ẻ…
Bắt Sassy với Sass
Mô-đun CSS
Phần kết luận

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 [email protected] [email protected] [email protected] [email protected]

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 HTML

Ghi 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 sau

Mở

{
 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']
}

8

import './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ạn

Xem 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

7

npx 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

6

Bạ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

3

Khi đã 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

6

Tạ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

8

Mở 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ết

Nế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 <= 11",
  "not op_mini all"
]

Đây là những trình duyệt mà ứng dụng tạo phản ứng đang nhắm mục tiêu theo mặc định

Nếu bạn cần hỗ trợ cho các trình duyệt khác nhau (giả sử IE 10), bạn sẽ cần bao gồm trình duyệt cụ thể như sau

"browserslist": [
  ">0.2%",
  "not dead",
  "not ie <= 11",
  "not op_mini all",
  "ie 10"
]

Để có danh sách đầy đủ các truy vấn trình duyệt, hãy truy cập trang chính thức

Một điều cuối cùng, tiền tố CSS Grid bị tắt theo mặc định. Nếu cần, bạn có thể bật nó lên bằng cách thêm

$primary-color: #282c34;
$secondary-color: #61dafb;

3 vào đầu tệp CSS của mình. Tuy nhiên, có , vì vậy hãy làm quen với những

Mô-đun CSS

Nhóm tại Facebook đã làm cho việc sử dụng Mô-đun CSS với ứng dụng tạo-phản ứng trở nên thực sự dễ dàng. Bạn chỉ cần sử dụng quy ước đặt tên sau.

$primary-color: #282c34;
$secondary-color: #61dafb;

4 hoặc

$primary-color: #282c34;
$secondary-color: #61dafb;

5, trong đó

$primary-color: #282c34;
$secondary-color: #61dafb;

6 là tên biểu định kiểu của bạn

Trước khi tiếp tục với một ví dụ, nếu bạn không chắc chắn về các Mô-đun CSS, đây là định nghĩa chính thức từ repo

Mô-đun CSS là một tệp CSS trong đó tất cả các tên lớp và tên hoạt hình được đặt trong phạm vi cục bộ theo mặc định

Về cơ bản, các tên lớp giống nhau không xung đột khi được sử dụng trong các tệp CSS khác nhau. Giả sử bạn có

$primary-color: #282c34;
$secondary-color: #61dafb;

7 và

$primary-color: #282c34;
$secondary-color: #61dafb;

8, thì trong mỗi tệp đó, bạn có một lớp có tên là

$primary-color: #282c34;
$secondary-color: #61dafb;

9 như vậy

// Button.css
.bg-color{background:red;}// Header.css
.bg-color{background:blue;}

Khi React chạy, các lớp thực sự sẽ được đặt tên như thế này

@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);
  }
}

0 và

@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);
  }
}

1. Họ tuân theo quy ước đặt tên sau.

@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);
  }
}

2

Tiếp tục với ví dụ Sass, mở

yarn start

9 và thêm vào như sau

.btn {
  width: 200px;
  height: 50px;
  font-size: 20px;
  border-radius: 5px;
  margin-top: 20px;
  background: rgb(199, 196, 23);
  border: none;&:hover {
    background: rgb(236, 233, 36);
  }
}

Bây giờ hãy 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);
  }
}

4 và mã được in đậm

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.scss';
import Button from './Button';class App extends Component {
  render() {
    return (
      
        
          
          
            Edit src/App.js and save to reload.
          

                      className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          
          
          

      

    );
  }
}export default App;

Về cơ bản, chúng tôi đang tạo một nút và gán một lớp

@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);
  }
}

5 cho nó. Chúng tôi cũng tạo một thành phần

@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);
  }
}

6

Bây giờ, hãy thực sự tạo thành phần Nút và tệp biểu định kiểu liên quan trong thư mục

yarn start

8

yarn add node-sass

0

Lưu ý rằng tôi đang tạo một Mô-đun CSS ở đây 😉

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);
  }
}

8 và thêm vào như sau

yarn add node-sass

1

Để chứng minh, tôi đang sử dụng cùng một tên lớp (

@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);
  }
}

5) như trong

yarn start

9

Bây giờ hãy mở

"browserslist": [
  ">0.2%",
  "not dead",
  "not ie <= 11",
  "not op_mini all"
]

1 và thêm vào như sau

yarn add node-sass

2

In đậm, bạn sẽ thấy cách chúng tôi có thể nhập biểu định kiểu để sử dụng Mô-đun CSS

Bạn có thể sử dụng hàm hủy (như tôi hiện đang làm) hoặc ký hiệu dấu chấm như vậy

yarn add node-sass

3

Đã đến lúc chạy ứng dụng

yarn start

Mô-đun CSS

Lưu ý hai lớp không xung đột. Cái được tạo trên toàn cầu vào

yarn start

9 giữ nguyên là

@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);
  }
}

5 và cái được tạo bằng Mô-đun CSS hiện là

"browserslist": [
  ">0.2%",
  "not dead",
  "not ie <= 11",
  "not op_mini all"
]

4

Cuối cùng, hãy xây dựng ứng dụng

yarn add node-sass

5

Mở biểu định kiểu được tạo bên dưới

"browserslist": [
  ">0.2%",
  "not dead",
  "not ie <= 11",
  "not op_mini all"
]

5 và bạn sẽ nhận thấy cả hai lớp đều có mặt, nhưng chúng không xung đột vì chúng được đặt tên khác nhau

biểu định kiểu đã tạo

Phần kết luận

Tôi hy vọng bạn thích bài viết này và cảm ơn bạn đã đọc. Nếu bạn có bất kỳ câu hỏi, đề xuất hoặc chỉnh sửa nào, hãy cho tôi biết trong phần bình luận bên dưới. Đừng quên chia sẻ bài viết này và bạn có thể theo dõi tôi trên Twitter

programming css

Tôi có thể nhập scss trong phản ứng không?

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ẻ…

Bắt Sassy với Sass

Mô-đun CSS

Phần kết luận

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội