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}
3: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;
}
//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}
4Đã 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}
5.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}
6 trong dự án className={styles.anyClassName}
7 của bạn. Bạn cần một số bước trong các dự án của bạn.- Git cam kết tất cả các thay đổi
- Chạy
8 từ dấu nhắc lệnh dự án của bạn.className={styles.anyClassName}
- Chuyển đến vị trí và mở tệp
9 Khoảng dòng #173. Thay thếclassName={styles.anyClassName}
0 bằngimport * as styles from './index.scss';
1import * as styles from './index.scss';
- Chuyển đến vị trí và mở tệp
2 Khoảng dòng #185. Thay thếimport * as styles from './index.scss';
0 bằngimport * as styles from './index.scss';
1import * as styles from './index.scss';
Thêm tệp
6 của bạn trên thành phần của bạn nhưclassName={styles.anyClassName}
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}
0Tệ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}
1Trong 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}
2Tạ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.
App.tsxĐơn giản vậy thôi!!!! 🎉🎉🎉🎉
Nút màu kết quả