Tôi đang cố gắng nhập một chủ đề từ mô-đun CSS nhưng TypeScript báo cho tôi lỗi "Không thể tìm thấy mô-đun" và chủ đề không được áp dụng trong thời gian chạy. Tôi nghĩ có gì đó không ổn với cấu hình Webpack của mình nhưng tôi không chắc vấn đề nằm ở đâu
Tôi đang sử dụng các công cụ sau
"typescript": "^2.0.3"
"webpack": "2.1.0-beta.25"
"webpack-dev-server": "^2.1.0-beta.9"
"react": "^15.4.0-rc.4"
"react-toolbox": "^1.2.3"
"node-sass": "^3.10.1"
"style-loader": "^0.13.1"
"css-loader": "^0.25.0"
"sass-loader": "^4.0.2"
"sass-lint": "^1.9.1"
"sasslint-webpack-plugin": "^1.0.4"
Đây là webpack.config.js
của tôi
var path = require['path'];
var webpack = require['webpack'];
var sassLintPlugin = require['sasslint-webpack-plugin'];
module.exports = {
entry: [
'webpack-dev-server/client?//localhost:8080',
'webpack/hot/dev-server',
'./src/index.tsx',
],
output: {
path: path.resolve[__dirname, 'dist'],
publicPath: '//localhost:8080/',
filename: 'dist/bundle.js',
},
devtool: 'source-map',
resolve: {
extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
},
module: {
rules: [{
test: /\.js$/,
loader: 'source-map-loader',
exclude: /node_modules/,
enforce: 'pre',
}, {
test: /\.tsx?$/,
loader: 'tslint-loader',
exclude: /node_modules/,
enforce: 'pre',
}, {
test: /\.tsx?$/,
loaders: [
'react-hot-loader/webpack',
'awesome-typescript-loader',
],
exclude: /node_modules/,
}, {
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}, {
test: /\.css$/,
loaders: ['style', 'css']
}],
},
externals: {
'react': 'React',
'react-dom': 'ReactDOM'
},
plugins: [
new sassLintPlugin[{
glob: 'src/**/*.s?[a|c]ss',
ignoreFiles: ['src/normalize.scss'],
failOnWarning: false, // Do it.
}],
new webpack.HotModuleReplacementPlugin[],
],
devServer: {
contentBase: './'
},
};
và App.tsx
nơi tôi đang cố gắng nhập
import * as React from 'react';
import { AppBar } from 'react-toolbox';
import appBarTheme from 'react-toolbox/components/app_bar/theme.scss'
// local ./theme.scss stylesheets aren't found either
interface IAppStateProps {
// No props yet
}
interface IAppDispatchProps {
// No state yet
}
class App extends React.Component {
constructor[props: IAppStateProps & IAppDispatchProps] {
super[props];
}
public render[] {
return [
];
}
}
export default App;
Điều gì khác được yêu cầu để cho phép nhập mô-đun biểu định kiểu an toàn?
Tạo các tệp định nghĩa TypeScript [
export const text: string; export const textHighlighted: string;4] cho các Mô-đun CSS được viết bằng SCSS [_______3_______5]. Kiểm tra bài đăng này để tìm hiểu thêm về lý do và nguồn cảm hứng đằng sau gói này
Ví dụ: đưa ra SCSS sau
@import "variables"; .text { color: $blue; &-highlighted { color: $yellow; } }
Các định nghĩa kiểu sau sẽ được tạo
export const text: string; export const textHighlighted: string;
Sử dụng cơ bản
Cài đặt và chạy như một
export const text: string; export const textHighlighted: string;6
________số 8_______
Hoặc, cài đặt trên toàn cầu
yarn global add typed-scss-modules typed-scss-modules src
Hoặc, với npm
npm install -D typed-scss-modules npx typed-scss-modules src
Tùy chọn CLI
Đối với tất cả các lệnh có thể, hãy chạy
export const text: string; export const textHighlighted: string;7
Đối số bắt buộc duy nhất là thư mục chứa tất cả các tệp SCSS. Đang chạy
export const text: string; export const textHighlighted: string;8 sẽ tìm kiếm tất cả các tệp phù hợp với
export const text: string; export const textHighlighted: string;9. Điều này có thể được ghi đè bằng cách cung cấp một mẫu thay vì một thư mục. Ví dụ,
yarn add -D typed-scss-modules yarn typed-scss-modules src0
yarn add -D typed-scss-modules
yarn typed-scss-modules src
1 [yarn add -D typed-scss-modules
yarn typed-scss-modules src
2]
- Loại.
yarn add -D typed-scss-modules yarn typed-scss-modules src
3 - Vỡ nợ.
yarn add -D typed-scss-modules yarn typed-scss-modules src
4 - Thí dụ.
yarn add -D typed-scss-modules yarn typed-scss-modules src
5
Theo dõi các tệp được thêm hoặc được thay đổi và tạo các định nghĩa loại tương ứng
yarn add -D typed-scss-modules
yarn typed-scss-modules src
6
- Loại.
yarn add -D typed-scss-modules yarn typed-scss-modules src
3 - Vỡ nợ.
yarn add -D typed-scss-modules yarn typed-scss-modules src
4 - Thí dụ.
yarn add -D typed-scss-modules yarn typed-scss-modules src
9
Bỏ qua bản dựng ban đầu khi vượt qua cờ theo dõi. Sử dụng điều này khi chạy đồng thời với một chiếc đồng hồ khác, nhưng quá trình xây dựng ban đầu sẽ diễn ra trước. Bạn sẽ chạy mà không có đồng hồ trước, sau đó bắt đầu chạy đồng thời sau
yarn global add typed-scss-modules
typed-scss-modules src
0
- Loại.
yarn global add typed-scss-modules typed-scss-modules src
1 - Vỡ nợ.
yarn global add typed-scss-modules typed-scss-modules src
2 - Thí dụ.
yarn global add typed-scss-modules typed-scss-modules src
3
Một mẫu hoặc một mảng các mẫu toàn cầu để loại trừ các tệp khớp và tránh tạo các định nghĩa kiểu
yarn global add typed-scss-modules
typed-scss-modules src
4 [yarn global add typed-scss-modules
typed-scss-modules src
5]
- Loại.
yarn global add typed-scss-modules typed-scss-modules src
1 - Vỡ nợ.
yarn global add typed-scss-modules typed-scss-modules src
2 - Thí dụ.
yarn global add typed-scss-modules typed-scss-modules src
8
Một loạt các đường dẫn để xem xét nhằm cố gắng giải quyết các khai báo
yarn global add typed-scss-modules typed-scss-modules src9 của bạn. Ví dụ này sẽ tìm kiếm thư mục
npm install -D typed-scss-modules npx typed-scss-modules src0 khi giải quyết việc nhập
npm install -D typed-scss-modules
npx typed-scss-modules src
1
- Loại.
npm install -D typed-scss-modules npx typed-scss-modules src
2 - Vỡ nợ. Nếu một tùy chọn được thông qua, nó sẽ luôn sử dụng triển khai gói được cung cấp. Nếu một tùy chọn không được thông qua, trước tiên, nó sẽ kiểm tra xem
npm install -D typed-scss-modules npx typed-scss-modules src
3 đã được cài đặt chưa. Nếu có, nó sẽ được sử dụng. Nếu không, nó sẽ kiểm tra xemnpm install -D typed-scss-modules npx typed-scss-modules src
4 đã được cài đặt chưa. Nếu có, nó sẽ được sử dụng. Cuối cùng, quay trở lạinpm install -D typed-scss-modules npx typed-scss-modules src
3 nếu tất cả các lần kiểm tra và xác nhận không thành công - Thí dụ.
npm install -D typed-scss-modules npx typed-scss-modules src
6
npm install -D typed-scss-modules
npx typed-scss-modules src
7 [npm install -D typed-scss-modules
npx typed-scss-modules src
8]
- Loại.
npm install -D typed-scss-modules npx typed-scss-modules src
9 - Vỡ nợ.
.text { color: blue; &-highlighted { color: yellow; } }
0 - Thí dụ.
.text { color: blue; &-highlighted { color: yellow; } }
1
Một đối tượng bí danh để ánh xạ tới các đường dẫn tương ứng của chúng. Ví dụ này sẽ thay thế bất kỳ
.text { color: blue; &-highlighted { color: yellow; } }2 bằng
.text { color: blue; &-highlighted { color: yellow; } }3
.text {
color: blue;
&-highlighted {
color: yellow;
}
}
4 [______44_______5]
- Loại.
npm install -D typed-scss-modules npx typed-scss-modules src
9 - Vỡ nợ.
.text { color: blue; &-highlighted { color: yellow; } }
0 - Thí dụ.
.text { color: blue; &-highlighted { color: yellow; } }
8
Một đối tượng của các chuỗi tiền tố để thay thế bằng các đường dẫn tương ứng của chúng. Ví dụ này sẽ thay thế bất kỳ
.text { color: blue; &-highlighted { color: yellow; } }9 bằng
export const text: string; export const textHighlighted: string;0. Điều này phù hợp với trường hợp sử dụng phổ biến để nhập tệp scss từ node_modules khi
export const text: string; export const textHighlighted: string;1 sẽ được sử dụng với
export const text: string; export const textHighlighted: string;2 để biên dịch dự án
export const text: string;
export const textHighlighted: string;
3 [export const text: string;
export const textHighlighted: string;
4]
- Loại.
export const text: string; export const textHighlighted: string;
5 - Vỡ nợ.
export const text: string; export const textHighlighted: string;
6 - ví dụ
export const text: string; export const textHighlighted: string;
7export const text: string; export const textHighlighted: string;
8. Để sử dụng nhiều trình định dạng, bạn phải sử dụngexport const text: string; export const textHighlighted: string;
9
Định dạng đặt tên lớp sẽ sử dụng khi chuyển đổi các lớp thành định nghĩa kiểu
- tất cả các. sử dụng tất cả các trình định dạng [ngoại trừ
.text { color: blue; &-highlighted { color: yellow; } }
0 và.text { color: blue; &-highlighted { color: yellow; } }
1] và chuyển đổi tất cả các tên lớp sang định dạng tương ứng của chúng, không trùng lặp. Để sử dụng tùy chọn này, bạn phải sử dụngexport const text: string; export const textHighlighted: string;
9 - con lạc đà. chuyển đổi tất cả các tên lớp thành trường hợp lạc đà, e. g.
.text { color: blue; &-highlighted { color: yellow; } }
3 =>.text { color: blue; &-highlighted { color: yellow; } }
4 - thịt nướng / param. chuyển đổi tất cả các tên lớp thành trường hợp kebab/param, e. g.
.text { color: blue; &-highlighted { color: yellow; } }
3 =>.text { color: blue; &-highlighted { color: yellow; } }
6 [tất cả chữ thường có dấu phân cách '-'] - dấu gạch ngang. chỉ chuyển các tên class có chứa dấu gạch ngang thành camel-case, các tên khác để nguyên, e. g.
.text { color: blue; &-highlighted { color: yellow; } }
7 =>.text { color: blue; &-highlighted { color: yellow; } }
7,.text { color: blue; &-highlighted { color: yellow; } }
3 =>.text { color: blue; &-highlighted { color: yellow; } }
4. Phù hợp với tùy chọn webpack - con rắn. chuyển đổi tất cả các tên lớp thành chữ thường với dấu gạch dưới giữa các từ
- không ai. không sửa đổi tên lớp đã cho [bạn nên sử dụng
export const text: string; export const textHighlighted: string;
9 khi sử dụngexport type Styles = { text: string; textHighlighted: string; }; export type ClassNames = keyof Styles; declare const styles: Styles; export default styles;
2 vì bất kỳ lớp nào cóexport type Styles = { text: string; textHighlighted: string; }; export type ClassNames = keyof Styles; declare const styles: Styles; export default styles;
3 trong đó đều không hợp lệ như tên biến thông thường]. Ghi chú. Nếu bạn đang sử dụng ứng dụng tạo-phản ứng v2. x và KHÔNG bị đẩy ra,export type Styles = { text: string; textHighlighted: string; }; export type ClassNames = keyof Styles; declare const styles: Styles; export default styles;
4 khớp với tên lớp được tạo trong cấu hình webpack của CRA
export type Styles = {
text: string;
textHighlighted: string;
};
export type ClassNames = keyof Styles;
declare const styles: Styles;
export default styles;
5 [______76_______6]
- Loại.
yarn add -D typed-scss-modules yarn typed-scss-modules src
3 - Vỡ nợ.
yarn add -D typed-scss-modules yarn typed-scss-modules src
4 - Thí dụ.
export type Styles = { text: string; textHighlighted: string; }; export type ClassNames = keyof Styles; declare const styles: Styles; export default styles;
9
Liệt kê bất kỳ tệp định nghĩa loại nào khác với những tệp sẽ được tạo. Nếu có bất kỳ thông tin nào khác, hãy thoát với mã trạng thái
export type ClassesType = keyof Styles;0
export type ClassesType = keyof Styles;
1 [export type ClassesType = keyof Styles;
2]
- Loại.
export type ClassesType = keyof Styles;
3 - Vỡ nợ.
export type ClassesType = keyof Styles;
4 - Thí dụ.
export type ClassesType = keyof Styles;
5
Loại xuất sẽ sử dụng khi tạo định nghĩa loại
export type ClassesType = keyof Styles;
6
Đưa ra SCSS sau
.text { color: blue; &-highlighted { color: yellow; } }
Các định nghĩa kiểu sau sẽ được tạo
export const text: string; export const textHighlighted: string;
export type ClassesType = keyof Styles;
7
Đưa ra SCSS sau
.text { color: blue; &-highlighted { color: yellow; } }
Các định nghĩa kiểu sau sẽ được tạo
export type Styles = { text: string; textHighlighted: string; }; export type ClassNames = keyof Styles; declare const styles: Styles; export default styles;
Loại xuất này rất hữu ích khi sử dụng tên lớp kebab [param] vì các biến có
export type Styles = { text: string; textHighlighted: string; }; export type ClassNames = keyof Styles; declare const styles: Styles; export default styles;3 không phải là biến hợp lệ và sẽ tạo ra các loại không hợp lệ hoặc khi tên lớp là từ khóa TypeScript [ví dụ:.
export type ClassesType = keyof Styles;9 hoặc
export const text: string; export const textHighlighted: string;00]. Ngoài ra, các loại
export const text: string; export const textHighlighted: string;01 và
export const text: string; export const textHighlighted: string;02 được xuất có thể hữu ích cho việc nhập chính xác các biến, hàm, v.v. khi làm việc với tên lớp động
export const text: string;
export const textHighlighted: string;
03
- Loại.
export const text: string; export const textHighlighted: string;
04 - Vỡ nợ.
export const text: string; export const textHighlighted: string;
05 - Thí dụ.
export const text: string; export const textHighlighted: string;
06
Tùy chỉnh tên loại được xuất trong tệp được tạo khi
export type ClassesType = keyof Styles;1 được đặt thành
export const text: string; export const textHighlighted: string;08. Chỉ xuất khẩu mặc định bị ảnh hưởng bởi lệnh này. Ví dụ này sẽ thay đổi dòng loại xuất thành
export type ClassesType = keyof Styles;
export const text: string;
export const textHighlighted: string;
09
- Loại.
export const text: string; export const textHighlighted: string;
04 - Vỡ nợ.
export const text: string; export const textHighlighted: string;
11 - Thí dụ.
export const text: string; export const textHighlighted: string;
12
Tùy chỉnh tên giao diện được xuất trong tệp được tạo khi
export type ClassesType = keyof Styles;1 được đặt thành
export const text: string; export const textHighlighted: string;08. Chỉ xuất khẩu mặc định bị ảnh hưởng bởi lệnh này. Ví dụ này sẽ thay đổi dòng giao diện xuất thành
export const text: string; export const textHighlighted: string;0
export const text: string;
export const textHighlighted: string;
15 [export const text: string;
export const textHighlighted: string;
16]
- Loại.
export const text: string; export const textHighlighted: string;
17 - Vỡ nợ.
export const text: string; export const textHighlighted: string;
18 - Thí dụ.
export const text: string; export const textHighlighted: string;
19
Chỉ định loại trích dẫn để khớp với cấu hình TypeScript của bạn. Chỉ xuất khẩu mặc định bị ảnh hưởng bởi lệnh này. Ví dụ này sẽ bọc tên lớp bằng dấu ngoặc kép ["]. Nếu Prettier được cài đặt và định cấu hình trong dự án, nó sẽ được sử dụng và có khả năng ghi đè hiệu ứng của cài đặt này
export const text: string;
export const textHighlighted: string;
20 [export const text: string;
export const textHighlighted: string;
21]
- Loại.
yarn add -D typed-scss-modules yarn typed-scss-modules src
3 - Vỡ nợ.
yarn add -D typed-scss-modules yarn typed-scss-modules src
4 - Thí dụ.
export const text: string; export const textHighlighted: string;
24
Chỉ ghi đè lên các tệp đã tạo nếu tệp nguồn có nhiều thay đổi gần đây hơn. Điều này có thể hữu ích nếu bạn muốn tránh cập nhật tệp không liên quan, điều này có thể khiến các quy trình theo dõi kích hoạt không cần thiết [e. g.
export const text: string; export const textHighlighted: string;25]
báo trước. Nếu tệp định nghĩa kiểu đã tạo được cập nhật theo cách thủ công, tệp đó sẽ không được tạo lại cho đến khi tệp scss tương ứng cũng được cập nhật
export const text: string;
export const textHighlighted: string;
26 [export const text: string;
export const textHighlighted: string;
27]
- Loại.
export const text: string; export const textHighlighted: string;
28 - Vỡ nợ.
export const text: string; export const textHighlighted: string;
29 - Thí dụ.
export const text: string; export const textHighlighted: string;
30
Đặt mức độ chi tiết của đầu ra bảng điều khiển
export const text: string;
export const textHighlighted: string;
31
In tất cả tin nhắn
export const text: string;
export const textHighlighted: string;
32
Chỉ in lỗi
export const text: string;
export const textHighlighted: string;
33
Chỉ in một số tin nhắn
export const text: string;
export const textHighlighted: string;
34
Không in gì
export const text: string;
export const textHighlighted: string;
35
- Loại.
export const text: string; export const textHighlighted: string;
04 - Vỡ nợ.
export const text: string; export const textHighlighted: string;
37 - Thí dụ.
export const text: string; export const textHighlighted: string;
38
Sẽ thêm một chuỗi vào đầu tệp đầu ra của bạn
export const text: string; export const textHighlighted: string;1
export const text: string;
export const textHighlighted: string;
39 [export const text: string;
export const textHighlighted: string;
40]
- Loại.
export const text: string; export const textHighlighted: string;
04 - Vỡ nợ. không ai
- Thí dụ.
export const text: string; export const textHighlighted: string;
42
Đặt một thư mục tương đối để xuất các định nghĩa loại được tạo. Thay vì viết các định nghĩa kiểu trực tiếp bên cạnh mỗi mô-đun SCSS [tệp anh chị em], nó sẽ ghi vào thư mục đầu ra có cùng đường dẫn
Nó sẽ sử dụng đường dẫn tương đối đến mô-đun SCSS từ đó công cụ này được thực thi. Đường dẫn tương tự này [bao gồm mọi thư mục] sẽ được tạo trong thư mục đầu ra. Điều này rất quan trọng để nó hoạt động bình thường với TypeScript
Quan trọng. để điều này hoạt động như mong đợi,
export const text: string; export const textHighlighted: string;43 cần được thêm vào cùng một thư mục đầu ra. Điều này sẽ cho phép TypeScript chọn các định nghĩa kiểu này và ánh xạ chúng tới các mô-đun SCSS thực tế
export const text: string; export const textHighlighted: string;2
export const text: string;
export const textHighlighted: string;
45 [export const text: string;
export const textHighlighted: string;
46]
- Loại.
export const text: string; export const textHighlighted: string;
04 - Vỡ nợ. không ai
- Thí dụ.
export const text: string; export const textHighlighted: string;
48
Thêm mã SCSS được cung cấp trước mỗi tệp. Điều này rất hữu ích để đưa toàn cục vào mọi tệp, chẳng hạn như thêm một lần nhập để tải các biến toàn cục cho mỗi tệp
tùy chọn cấu hình
Tất cả các tùy chọn trên cũng được hỗ trợ dưới dạng tệp cấu hình trong thư mục gốc của dự án. Các tên tệp cấu hình sau được hỗ trợ
export const text: string; export const textHighlighted: string;
49export const text: string; export const textHighlighted: string;
50
Tệp có thể cung cấp xuất khẩu có tên
export const text: string; export const textHighlighted: string;51 hoặc xuất khẩu mặc định
export const text: string; export const textHighlighted: string;3
Ghi chú. các tùy chọn cấu hình giống như các tùy chọn CLI không có dấu gạch ngang ở đầu [
export const text: string; export const textHighlighted: string;52]. Chỉ hỗ trợ tên tùy chọn đầy đủ [không phải bí danh] trong tệp cấu hình
Tùy chọn CLI sẽ được ưu tiên hơn tùy chọn tệp cấu hình
Ngoài tất cả các tùy chọn CLI, sau đây là các tùy chọn chỉ khả dụng với tệp cấu hình
export const text: string;
export const textHighlighted: string;
53
- Loại.
export const text: string; export const textHighlighted: string;
54 - Vỡ nợ. không ai
xác định một. Điều này chỉ cần thiết nếu các trình nhập SASS tùy chỉnh đã được sử dụng trong quá trình xây dựng. Điều này được sử dụng nội bộ để thực hiện
export const text: string; export const textHighlighted: string;55 và
export const text: string; export const textHighlighted: string;56
Tham khảo
export const text: string; export const textHighlighted: string;57 để biết thêm chi tiết và định nghĩa loại nhà nhập khẩu
npm install -D typed-scss-modules npx typed-scss-modules src3 và
npm install -D typed-scss-modules npx typed-scss-modules src4
ví dụ
Để biết ví dụ về cách sử dụng và định cấu hình công cụ này, hãy xem thư mục
export const text: string; export const textHighlighted: string;60
- Ví dụ cơ bản
- Ví dụ xuất mặc định
- Ví dụ về tệp cấu hình [với trình nhập tùy chỉnh]
Cộng tác viên✨
Cảm ơn những người tuyệt vời này [phím biểu tượng cảm xúc]
Janeene Beeforth
🐛💻📖
Eric Ferreira
💻📖
Luis Lopes
💻
Josh Wedekind
💻📖⚠️
Jared Gesser
Raphaël L
💻
Nick Perez
🐛💻
Ngay cả Alander
💻⚠️
Katie Foster
💻⚠️📖
Carlos Aguilera
💻
Craig McCown
💻⚠️📖
Guillaume Vagner
💻⚠️🐛
Sam Magura
💻⚠️
Dự án này tuân theo đặc điểm kỹ thuật của tất cả những người đóng góp. Đóng góp của bất kỳ loại chào đón
lựa chọn thay thế
Gói này bị ảnh hưởng nặng nề đối với các mô-đun typed-css tạo ra các tệp định nghĩa TypeScript [
export const text: string; export const textHighlighted: string;4] cho các Mô-đun CSS được viết bằng CSS [
export const text: string; export const textHighlighted: string;62]
Gói này hiện được sử dụng làm CLI. Ngoài ra còn có các gói tạo các loại dưới dạng trình tải webpack