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à
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: './'
},
};
01 của tôivar 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à
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: './'
},
};
02 của tôi, nơi tôi đang cố gắng nhậpimport * 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?
Plugin này cung cấp thông tin loại cho IDE và bất kỳ công cụ nào khác hoạt động với plugin dịch vụ ngôn ngữ TypeScript
Tại thời điểm này, TypeScript không hỗ trợ plugin trong quá trình biên dịch. Điều này có nghĩa là plugin này không thể
- cung cấp lỗi trong quá trình biên dịch, hoặc
- thêm hỗ trợ mô-đun CSS vào dự án của bạn
Để biết thêm thông tin và/hoặc thêm hỗ trợ cho tính năng này, hãy xem. https. //github. com/Microsoft/TypeScript/vấn đề/16607
Nếu bạn cần một giải pháp khác, những dự án này có thể hữu ích
- Để được hỗ trợ Jest, hãy xem https. //www. npmjs. com/package/jest-css-modules-transform [một trong số ít tùy chọn]
- Đối với cấu hình Webpack, xem https. // gói web. js. org/loaders/css-loader/#pure-css-css-modules-and-postcss để biết ví dụ
Cài đặt
Để cài đặt với Yarn
yarn add -D typescript-plugin-css-modules
Để cài đặt với npm
npm install -D typescript-plugin-css-modules
Sau khi cài đặt, hãy thêm plugin này vào
npm install -D typescript-plugin-css-modules5 của bạn
{ "compilerOptions": { "plugins": [{ "name": "typescript-plugin-css-modules" }] } }
Nếu bạn đang sử dụng Visual Studio Code, vui lòng làm theo các hướng dẫn sau
Khi cấu hình Webpack khác nhau, bạn có thể cần cung cấp các tùy chọn bổ sung cho plugin này để phù hợp với cấu hình dự án của mình. Đối với người dùng Tạo ứng dụng React, plugin này sẽ hoạt động mà không cần cấu hình bổ sung
Nhập CSS
Xuất mặc định luôn được cung cấp cho mô-đun CSS của bạn
import styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];
Kể từ phiên bản 1. 1. 0, bạn cũng có thể sử dụng xuất có tên cho các lớp không chứa dấu gạch nối hoặc dấu gạch dưới. Bạn vẫn có thể truy cập các lớp khác thông qua xuất mặc định
________số 8
Tùy chọn
Xin lưu ý rằng không có tùy chọn nào được yêu cầu. Tuy nhiên, tùy thuộc vào cấu hình của bạn, bạn có thể cần tùy chỉnh các tùy chọn này
Tùy chọn Giá trị mặc địnhMô tảnpm install -D typescript-plugin-css-modules6
npm install -D typescript-plugin-css-modules7Tắt cảnh báo TypeScript trên các tên lớp không xác định [chỉ dành cho nhập mặc định].
npm install -D typescript-plugin-css-modules0
npm install -D typescript-plugin-css-modules9Xem
npm install -D typescript-plugin-css-modules0 bên dưới.
{ "compilerOptions": { "plugins": [{ "name": "typescript-plugin-css-modules" }] } }1
{ "compilerOptions": { "plugins": [{ "name": "typescript-plugin-css-modules" }] } }2Thay đổi phần mở rộng tệp mà plugin này xử lý.
npm install -D typescript-plugin-css-modules1
npm install -D typescript-plugin-css-modules7Xem
npm install -D typescript-plugin-css-modules1 bên dưới.
npm install -D typescript-plugin-css-modules2
npm install -D typescript-plugin-css-modules7Xem
npm install -D typescript-plugin-css-modules2 bên dưới.
{ "compilerOptions": { "plugins": [{ "name": "typescript-plugin-css-modules" }] } }9
npm install -D typescript-plugin-css-modules7Cho phép chuyển sang định nghĩa, với khả năng tương thích hạn chế. Xem
{ "compilerOptions": { "plugins": [{ "name": "typescript-plugin-css-modules" }] } }9 bên dưới.
import styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];2____47Enable để tương thích với TypeScript's
import styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];2.
import styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];5
import styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];6Cho phép xuất tên cho các tên lớp tương thích.
import styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];7______78Cung cấp các tùy chọn cho
import styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];9.
npm install -D typescript-plugin-css-modules3
import styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];8Xem
npm install -D typescript-plugin-css-modules3 bên dưới.
npm install -D typescript-plugin-css-modules4
import styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];8Xem
npm install -D typescript-plugin-css-modules4 bên dưới
yarn add -D typescript-plugin-css-modules9
npm install -D typescript-plugin-css-modules
0
Thực hiện hành vi của tùy chọn
import styles, { myClass } from 'my.module.css'; const a = myClass; const b = styles['my_other-class'];7
import styles, { myClass } from 'my.module.css'; const a = myClass; const b = styles['my_other-class'];8
Tùy chọn có sẵn là.
import styles, { myClass } from 'my.module.css'; const a = myClass; const b = styles['my_other-class'];9,
yarn add -D typescript-plugin-css-modules90,
yarn add -D typescript-plugin-css-modules91,
yarn add -D typescript-plugin-css-modules92 và
yarn add -D typescript-plugin-css-modules93
npm install -D typescript-plugin-css-modules
1
npm install -D typescript-plugin-css-modules1 là một tùy chọn nâng cao, cho phép bạn cung cấp trình kết xuất CSS
Khi một trình kết xuất tùy chỉnh được cung cấp, các trình kết xuất khác sẽ không được sử dụng
Đường dẫn đến
npm install -D typescript-plugin-css-modules1 phải liên quan đến thư mục gốc của dự án [i. e.
yarn add -D typescript-plugin-css-modules97]
Bản thân trình kết xuất tùy chỉnh phải là một tệp JavaScript. Hàm sẽ được gọi với ba đối số. một chuỗi
yarn add -D typescript-plugin-css-modules98, một đối tượng
yarn add -D typescript-plugin-css-modules99 [xem
npm install -D typescript-plugin-css-modules40] và một đối tượng
npm install -D typescript-plugin-css-modules41 - chứa các tùy chọn như được đặt trong
npm install -D typescript-plugin-css-modules5 của bạn. Nó phải đồng bộ và phải trả về CSS hợp lệ
npm install -D typescript-plugin-css-modules4
Bạn có thể tìm thấy một ví dụ về trình kết xuất tùy chỉnh trong đồ đạc thử nghiệm của chúng tôi [
npm install -D typescript-plugin-css-modules43]
npm install -D typescript-plugin-css-modules44 nội bộ được cung cấp để gỡ lỗi
Nếu bạn sử dụng Webpack, hãy lưu ý rằng việc nhập dấu ngã [
npm install -D typescript-plugin-css-modules45] không được hỗ trợ bởi Less và Sass nguyên bảnĐối với người dùng Sass. Một nhà nhập khẩu tùy chỉnh đã được triển khai để giải quyết vấn đề này kể từ v3
Dành cho ít người dùng hơn. Gói này xuất một customRenderer cho phép nhập dấu ngã.
npm install -D typescript-plugin-css-modules46
npm install -D typescript-plugin-css-modules
2
npm install -D typescript-plugin-css-modules2 là một tùy chọn nâng cao, cho phép bạn cung cấp mẫu cho các khai báo TypeScript được tạo
Khi một mẫu tùy chỉnh được cung cấp, đầu ra của nó được sử dụng làm tệp khai báo ảo [
npm install -D typescript-plugin-css-modules49]
Đường dẫn đến
npm install -D typescript-plugin-css-modules2 phải liên quan đến thư mục gốc của dự án [i. e.
{ "compilerOptions": { "plugins": [{ "name": "typescript-plugin-css-modules" }] } }61]
Bản thân trình kết xuất tùy chỉnh phải là một tệp JavaScript. Hàm sẽ được gọi với hai đối số. một chuỗi
{ "compilerOptions": { "plugins": [{ "name": "typescript-plugin-css-modules" }] } }62 và một đối tượng
yarn add -D typescript-plugin-css-modules99 [xem
npm install -D typescript-plugin-css-modules40]. Nó phải đồng bộ và phải trả về một khai báo TypeScript hợp lệ [như được tìm thấy trong tệp
{ "compilerOptions": { "plugins": [{ "name": "typescript-plugin-css-modules" }] } }65]
{ "compilerOptions": { "plugins": [{ "name": "typescript-plugin-css-modules" }] } }6
Bạn có thể tìm thấy một mẫu tùy chỉnh ví dụ trong các đồ đạc thử nghiệm của chúng tôi [
{ "compilerOptions": { "plugins": [{ "name": "typescript-plugin-css-modules" }] } }66]
npm install -D typescript-plugin-css-modules44 nội bộ được cung cấp để gỡ lỗi
Đối tượng
{ "compilerOptions": { "plugins": [{ "name": "typescript-plugin-css-modules" }] } }68 đại diện cho tất cả các tên lớp được trích xuất từ Mô-đun CSS. Chúng có sẵn nếu bạn muốn thêm một biểu diễn tùy chỉnh của các lớp CSS
{
"compilerOptions": {
"plugins": [{ "name": "typescript-plugin-css-modules" }]
}
}
9
Điều này cho phép một trình soạn thảo như Visual Studio Code đi đến định nghĩa của tên lớp [tệp và dòng]
Đây là thử nghiệm và chỉ hoạt động với Sass [hiện tại] và có thể không phải lúc nào cũng hoạt động như mong đợi
npm install -D typescript-plugin-css-modules
3
Tùy chọn Giá trị mặc địnhMô tảimport styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];71
npm install -D typescript-plugin-css-modules7Đặt thành
import styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];6 để tải plugin từ cấu hình PostCSS của bạn.
import styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];74
npm install -D typescript-plugin-css-modules7Chỉ hỗ trợ plugin đồng bộ hóa. Sử dụng điều này để thiết lập một loạt các plugin không đồng bộ để loại trừ [i. e.
import styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];76]
npm install -D typescript-plugin-css-modules
4
Tùy chọn Giá trị mặc định Mô tảimport styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];78
import styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];8Đặt tùy chọn trình kết xuất cho Ít hơn.
import styles, { myClass } from 'my.module.css'; const a = myClass; const b = styles['my_other-class'];60
import styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];8Đặt tùy chọn trình kết xuất cho Sass.
import styles, { myClass } from 'my.module.css'; const a = myClass; const b = styles['my_other-class'];62
import styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];8Đặt tùy chọn trình kết xuất cho Bút stylus
Để thuận tiện,
import styles, { myClass } from 'my.module.css'; const a = myClass; const b = styles['my_other-class'];64 cho Sass được mở rộng, không thay thế. Các giá trị mặc định là đường dẫn của tệp hiện tại vàimport styles, { myClass } from 'my.module.css'; const a = myClass; const b = styles['my_other-class'];65
Mã phòng thu trực quan
Đề nghị sử dụng
Để sử dụng plugin này với Visual Studio Code, bạn nên đặt phiên bản TypeScript cho không gian làm việc của mình, phiên bản này sẽ tải các plugin từ tệp
npm install -D typescript-plugin-css-modules5 của bạn
Để biết hướng dẫn, hãy xem. Sử dụng phiên bản không gian làm việc của TypeScript
sử dụng thay thế
Nếu bạn không sử dụng bất kỳ tùy chọn plugin nào, bạn có thể đơn giản thêm plugin này vào
import styles, { myClass } from 'my.module.css'; const a = myClass; const b = styles['my_other-class'];67 trong cài đặt. Bạn không thể cung cấp tùy chọn plugin với phương pháp này
import styles from 'my.module.css'; const a = styles.myClass; const b = styles['my_other-class'];7
Định nghĩa tùy chỉnh
Ghi chú. Tạo Ứng dụng React Người dùng có thể bỏ qua phần này nếu bạn đang sử dụng
import styles, { myClass } from 'my.module.css'; const a = myClass; const b = styles['my_other-class'];68 trở lên
Nếu dự án của bạn chưa có các khai báo chung cho các Mô-đun CSS, thì bạn sẽ cần thêm các mô-đun này để giúp TypeScript hiểu được hình dạng chung của CSS đã nhập trong quá trình xây dựng
Nơi bạn lưu trữ các khai báo toàn cầu là tùy thuộc vào bạn. Một ví dụ có thể trông giống như.
import styles, { myClass } from 'my.module.css'; const a = myClass; const b = styles['my_other-class'];69
Dưới đây là một ví dụ mà bạn có thể sao chép hoặc sửa đổi [bạn chỉ khai báo cho các phần mở rộng được sử dụng trong dự án của mình]. Nếu bạn sử dụng
{ "compilerOptions": { "plugins": [{ "name": "typescript-plugin-css-modules" }] } }1, bạn sẽ cần sửa đổi điều này
import styles, { myClass } from 'my.module.css'; const a = myClass; const b = styles['my_other-class'];6
Xử lý sự cố
Để khắc phục sự cố và gỡ lỗi, bạn có thể xem Nhật ký máy chủ TypeScript trong Visual Studio Code bằng cách nhập
npm install -D typescript-plugin-css-modules01 vào bảng lệnh
Nếu bạn không sử dụng Visual Studio Code hoặc đang gặp sự cố với phương pháp trên, bạn có thể đặt biến môi trường
npm install -D typescript-plugin-css-modules02