Không thể tìm thấy mô-đun scss phản ứng nguyên cảo

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

Show

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?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: './'
  },
};

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

Không thể tìm thấy mô-đun scss phản ứng nguyên cảo

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

yarn add -D typed-scss-modules yarn typed-scss-modules src1 (yarn add -D typed-scss-modules yarn typed-scss-modules src2)

  • 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 src6

  • 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 src0

  • 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 src4 (yarn global add typed-scss-modules typed-scss-modules src5)

  • 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 src
9 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 src
0 khi giải quyết việc nhập

npm install -D typed-scss-modules npx typed-scss-modules src1

  • 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 xem
    npm 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ại
    npm 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 src7 (npm install -D typed-scss-modules npx typed-scss-modules src8)

  • 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;
      7
    • export const text: string;
      export const textHighlighted: string;
      8. Để sử dụng nhiều trình định dạng, bạn phải sử dụng
      export 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ụng
    export 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ụng
    export 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;
    49
  • export 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 src
3 và
npm install -D typed-scss-modules
npx typed-scss-modules src
4

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