Css nhập bản thảo không thể tìm thấy mô-đun

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?http://localhost:8080',
    'webpack/hot/dev-server',
    './src/index.tsx',
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'http://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ôi

var path = require('path');
var webpack = require('webpack');
var sassLintPlugin = require('sasslint-webpack-plugin');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/dev-server',
    './src/index.tsx',
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'http://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?http://localhost:8080',
    'webpack/hot/dev-server',
    './src/index.tsx',
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: 'http://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ậ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?

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-modules

5 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-modules

6

npm install -D typescript-plugin-css-modules

7Tắ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-modules

0

npm install -D typescript-plugin-css-modules

9Xem

npm install -D typescript-plugin-css-modules

0 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-modules

1

npm install -D typescript-plugin-css-modules

7Xem

npm install -D typescript-plugin-css-modules

1 bên dưới.

npm install -D typescript-plugin-css-modules

2

npm install -D typescript-plugin-css-modules

7Xem

npm install -D typescript-plugin-css-modules

2 bên dưới.

{
  "compilerOptions": {
    "plugins": [{ "name": "typescript-plugin-css-modules" }]
  }
}

9

npm install -D typescript-plugin-css-modules

7Cho 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-modules

3

import styles from 'my.module.css';

const a = styles.myClass;
const b = styles['my_other-class'];

8Xem

npm install -D typescript-plugin-css-modules

3 bên dưới.

npm install -D typescript-plugin-css-modules

4

import styles from 'my.module.css';

const a = styles.myClass;
const b = styles['my_other-class'];

8Xem

npm install -D typescript-plugin-css-modules

4 bên dưới

yarn add -D typescript-plugin-css-modules

9

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-modules

90,

yarn add -D typescript-plugin-css-modules

91,

yarn add -D typescript-plugin-css-modules

92 và

yarn add -D typescript-plugin-css-modules

93

npm install -D typescript-plugin-css-modules

1

npm install -D typescript-plugin-css-modules

1 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-modules

1 phải liên quan đến thư mục gốc của dự án (i. e.

yarn add -D typescript-plugin-css-modules

97)

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-modules

98, một đối tượng

yarn add -D typescript-plugin-css-modules

99 (xem

npm install -D typescript-plugin-css-modules

40) và một đối tượng

npm install -D typescript-plugin-css-modules

41 - chứa các tùy chọn như được đặt trong

npm install -D typescript-plugin-css-modules

5 của bạn. Nó phải đồng bộ và phải trả về CSS hợp lệ

npm install -D typescript-plugin-css-modules

4

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-modules

43)

npm install -D typescript-plugin-css-modules

44 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-modules

45) 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-modules

46

npm install -D typescript-plugin-css-modules

2

npm install -D typescript-plugin-css-modules

2 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-modules

49)

Đường dẫn đến

npm install -D typescript-plugin-css-modules

2 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-modules

99 (xem

npm install -D typescript-plugin-css-modules

40). 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-modules

44 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-modules

7Đặ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-modules

7Chỉ 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-modules

5 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-modules

01 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-modules

02

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

Sự khác biệt giữa CSS và SCSS trong góc là gì?

CSS mô-đun là gì?