Cách nhập tệp scss trong phản ứng js

Sass (các biểu định kiểu cú pháp tuyệt vời) là một phần mở rộng của CSS với các tính năng bổ sung giúp nó mạnh mẽ hơn. Điều tốt nhất về Sass là khả năng tương thích với CSS, có nghĩa là bạn có thể sử dụng nó trong các dự án phát triển web của mình với các khung JavaScript như React

Tuy nhiên, không giống như vanilla CSS, bạn cần thiết lập một chút để sử dụng Sass. Tìm hiểu cách thức hoạt động của nó bằng cách thiết lập một React đơn giản. js và tích hợp Sass với nó

Cách sử dụng Sass trong React của bạn. dự án js

Giống như các bộ xử lý CSS khác, Sass không được hỗ trợ bởi React. Để sử dụng Sass trong React, bạn cần cài đặt phần phụ thuộc của bên thứ ba thông qua trình quản lý gói như yarn hoặc npm

Bạn có thể kiểm tra xem npm hoặc yarn đã được cài đặt trên máy cục bộ của mình hay chưa bằng cách chạy npm --version hoặc yarn --version. Nếu bạn không thấy số phiên bản trong thiết bị đầu cuối của mình, trước tiên hãy cài đặt npm hoặc sợi

Tạo phản ứng. dự án js

Để làm theo hướng dẫn này, bạn có thể thiết lập một React đơn giản. ứng dụng js sử dụng ứng dụng tạo-phản ứng

First, use a command line to navigate to the folder you want to create your React project in. Then run npx create-react-app . Once the process finishes, enter the app directory using cd . Add the following content to your App.js file as a starter:

 import React from "react"; 
import "./App.scss"; 
function App() { 
return ( 
 <div className="wrapper"> 
  <h1>Using Sass in Reacth1> 
  <header className="wrapper__btns"> 
   <button>Blue Buttonbutton> 
   <button>Red Buttonbutton> 
   <button>Green Buttonbutton> 
  header> 
 div> ); 
} 
export default App; 

Khi bạn đã thiết lập một dự án React cơ bản, đã đến lúc tích hợp Sass

Cài đặt Sass

Bạn có thể cài đặt Sass qua npm hoặc yarn. Cài đặt nó qua yarn bằng cách chạy yarn add sass hoặc, nếu bạn thích npm, hãy chạy npm install sass. Trình quản lý gói của bạn sẽ thêm phiên bản mới nhất của Sass vào danh sách phụ thuộc trong gói của dự án. tập tin json

Đổi tên. tập tin css để. scss hoặc. ngổ ngáo

Trong thư mục của dự án, đổi tên Ứng dụng. css và chỉ mục. css vào ứng dụng. scss và chỉ mục. scss, tương ứng

Sau khi bạn đã đổi tên các tệp đó, bạn cần cập nhật các mục nhập trong Ứng dụng của mình. js và chỉ mục. js để khớp với phần mở rộng tệp mới như sau

 import "./index.scss";
import "./App.scss"; 

Từ thời điểm này trở đi, bạn nên sử dụng. tiện ích mở rộng scss cho bất kỳ tệp kiểu nào bạn tạo

Nhập và sử dụng biến và mixin

Một trong những lợi thế quan trọng nhất của Sass là nó giúp bạn viết các kiểu rõ ràng, có thể tái sử dụng bằng cách sử dụng các biến và mixin. Mặc dù có thể không rõ ràng về cách bạn có thể làm điều tương tự trong React, nhưng nó không quá khác biệt so với việc sử dụng Sass trong các dự án được viết bằng JavaScript và HTML đơn giản

Đầu tiên, tạo một thư mục Styles mới trong thư mục src của bạn. Trong thư mục Styles, tạo hai tệp. _biến. scss và _mixin. scss. Thêm các quy tắc sau vào _variables. scss

 $background-color: #f06292;
$text-color: #f1d3b3;
$btn-width: 120px;
$btn-height: 40px;
$block-padding: 60px; 

Và thêm phần sau vào _mixins. scss

 @mixin vertical-list {
    display: flex;
    align-items: center;
    flex-direction: column;
} 

Sau đó nhập các biến và mixin trong Ứng dụng. scss như sau

 @import "./Styles/variables";
@import "./Styles/mixins"; 

Sử dụng các biến và mixin của bạn trong Ứng dụng. tập tin scss

 @import "./Styles/variables.scss";
@import "./Styles/mixins";
.wrapper {
  background-color: $background-color;
  color: $text-color;
  padding: $block-padding;

  &__btns {
    @include vertical-list;
    button {
      width: $btn-width;
      height: $btn-height;
    }
   }
} 

Đó là cách bạn sử dụng biến và mixin trong React. Bên cạnh mixin và biến, bạn cũng có thể sử dụng tất cả các tính năng tuyệt vời khác trong Sass, chẳng hạn như hàm. không có giới hạn

Sử dụng Sass trong React. js

Sass cung cấp nhiều chức năng hơn trên CSS, đây chính xác là những gì bạn cần để viết mã CSS có thể tái sử dụng

Bạn có thể bắt đầu sử dụng Sass trong React bằng cách cài đặt gói sass qua npm hoặc yarn, cập nhật các tệp CSS của bạn thành. scss hoặc. sass, sau đó cập nhật quá trình nhập của bạn để sử dụng phần mở rộng tệp mới. Sau đó, bạn có thể bắt đầu viết SCSS trong React

Chúng ta có thể sử dụng SCSS trong phản ứng không?

Làm thế nào để SCSS kết nối để phản ứng?

Bạn có thể nhập trong SCSS không?

Làm cách nào để nhập tệp SCSS trong HTML?