Hướng dẫn how do i import a scss file into typescript react? - Làm cách nào để nhập tệp scss vào phản ứng TypeScript?

Tôi không thể nhập tệp SCSS ở định dạng dưới đây.

import * as styles from './index.scss';

Lên dưới

className={styles.anyClassName}

Không thể tìm thấy mô -đun './index.scss'

Tôi muốn sử dụng tên lớp như dưới đây:

className={styles.anyClassName}

Đã hỏi ngày 26 tháng 6 năm 2018 lúc 8:41Jun 26, 2018 at 8:41

1

Để nhập SCSS dưới dạng đối tượng trong TS như thế này:

import * as styles from './index.scss';

• Tạo tệp 'Global.d.ts' trong thư mục nguồn của bạn (hoặc bên ngoài, nhưng phải được đưa vào thư mục SRC được xác định trong TSConfig)
• Thêm mã sau bên trong

declare module '*.scss' {
  const content: {[className: string]: string};
  export = content;
}

https://basarat.gitbooks.io/typescript/docs/types/ambient/d.ts.html

Đã trả lời ngày 20 tháng 10 năm 2018 lúc 14:51Oct 20, 2018 at 14:51

user2668735user2668735user2668735

1.0082 huy hiệu vàng18 Huy hiệu bạc28 Huy hiệu đồng2 gold badges18 silver badges28 bronze badges

Tôi đã bắt gặp câu hỏi này gần đây và hình dung có thể hữu ích khi thêm câu trả lời giúp thực hiện điều này tại thời điểm dự án được tạo (sử dụng ứng dụng created-react-app) và không cần phải đẩy hoặc sửa đổi cấu hình webpack:

className={styles.anyClassName}

Đã trả lời ngày 20 tháng 11 năm 2018 lúc 20:38Nov 20, 2018 at 20:38

JamesLaffertyjameslaffertyjameslafferty

2.1022 huy hiệu vàng21 Huy hiệu bạc25 Huy hiệu đồng2 gold badges21 silver badges25 bronze badges

Hãy chắc chắn rằng bạn đã cài đặt

className={styles.anyClassName}

Nếu không chạy:

 npm i react-scripts-scss-ts --save

Đã trả lời ngày 24 tháng 12 năm 2018 lúc 20:47Dec 24, 2018 at 20:47

IkodeikodeiKode

8.97114 Huy hiệu vàng55 Huy hiệu bạc82 Huy hiệu đồng14 gold badges55 silver badges82 bronze badges

Một trong những cách này bạn làm việc với phong cách

className={styles.anyClassName}

className={styles.anyClassName}

1. Git cam kết tất cả các thay đổi
2. Chạy

   className={styles.anyClassName}
   

   8 từ dấu nhắc lệnh dự án của bạn.
3. Chuyển đến vị trí và mở tệp

   className={styles.anyClassName}
   

   9 Khoảng dòng #173. Thay thế

   import * as styles from './index.scss';
   

   0 bằng

   import * as styles from './index.scss';
   

   1
4. Chuyển đến vị trí và mở tệp

   import * as styles from './index.scss';
   

   2 Khoảng dòng #185. Thay thế

   import * as styles from './index.scss';
   

   0 bằng

   import * as styles from './index.scss';
   

   1

5. Thêm tệp

   className={styles.anyClassName}
   

   6 của bạn trên thành phần của bạn như

   import './App.scss';
   

   và sử dụng như

   
       
   Styed Text
   
   

Đó là nó.

H. Pauwelyn

Huy hiệu vàng 13K2679 Huy hiệu bạc134 Huy hiệu đồng26 gold badges79 silver badges134 bronze badges

Đã trả lời ngày 26 tháng 6 năm 2018 lúc 19:03Jun 26, 2018 at 19:03

6

Từ các biến SCSS đến JSS với UI vật liệu

Giới thiệu

Gần đây tôi đã bắt đầu một dự án mới trên React (khung mà tôi chưa từng sử dụng trước đây). Điểm đạn đầu tiên là có thể sử dụng một dự án theo chủ đề Legacy *.SCSS và áp dụng màu sắc, khoảng cách, v.v.

Tạo một dự án React mới với TypeScript và SCSS

npx create-react-app my-react-app — template typescript

OK, tốt đẹp bạn có ứng dụng React của mình với TypeScript, bây giờ chúng tôi sẽ thêm vào Sass Sass vì Node-Sass hiện không bị phản đối, đổi tên tệp CSS cơ bản.

yarn install sass -D

Đổi tên tất cả các index.css thành index.scss, cập nhật các tệp khác và nhập các câu lệnh trong tất cả các tệp liên quan.

Tạo mô -đun CSS

Dưới đây là tệp Legacy.SCSS của chúng tôi với một vài biến, ví dụ màu sắc.

 $color-primary: #387ef5,
 $color-secondary: #32db64,
 $color-danger: #f53d3d

Tạo tệp mô -đun CSS, cụ thể hơn là một tệp mô -đun SCSS.Module.SCSS, với toán tử Anexport và tên biến phù hợp cho TypeScript. Mỗi yếu tố mới được liên kết với một phần cũ.style.module.scss, with anexport operator and suitable variable names for Typescript. Each new element is bind to an old one.

className={styles.anyClassName}

Tệp mô -đun CSS với cách đặt tên cụ thể *.Module. có thể nhập khẩu trong *.tsx. Bạn có thể đọc thêm về nó ở đây.*.module. can be natively import in *.tsx. You can read more about it here.

Nhập các biến trong tệp *.tsx và áp dụng chủ đề MUI

Thêm UI vật liệu

className={styles.anyClassName}

Trong một số trường hợp tùy thuộc vào phiên bản UI tài liệu, bạn có thể phải thêm cảm xúc.

className={styles.anyClassName}

Tạo một chủ đề với các màu sơ cấp, phụ và lỗi sử dụng các biến đã nhập từ mô -đun CSS.

Đơn giản vậy thôi!!!! 🎉🎉🎉🎉

Tôi có thể sử dụng SCSS trong React không?

Tôi có thể sử dụng biến TypeScript trong SCSS không?

Chúng ta có thể nhập tệp SCSS trong CSS không?