web-dev-qa-db-ja.com

TypeScript、ReactおよびWebpackを使用してCSSモジュールをインポートする方法

WebpackでTypeScriptにCSSモジュールをインポートする方法は？

  1. 生成（または自動生成）.d.ts CSSのファイル？そして、古典的なTypeScript importステートメントを使用しますか？ ./styles.css.d.ts：

    import * as styles from './styles.css'

  2. require Webpack関数を使用してインポートしますか？

    let styles = require("./styles.css");

しかし、最後のアプローチでは、require関数を定義する必要があります。

CSSファイルの定義とクラスのIntelliSenseを処理できる最適なアプローチまたは最適なオプションとは何ですか？

reactjstypescriptwebpacktypescript-typingscss-modules
23
Diego Laciar

A）あなたが言っているように、requireを使用する最も簡単な（最良ではない）オプションが1つあります。

const css = require('./component.css')
  • TypeScriptの標準機能ではないため、requireの入力が必要です。

  • この特定のrequireの最も簡単なタイピングは次のとおりです。

    declare function require(name: string): string;

  • 次に、WebpackはTypeScriptをコンパイルし、モジュールを適切に使用します-BUT IDE help（））とbuildのクラス名チェックなし.

B）標準importを使用するより良い解決策があります：

import * as css from './component.css'
  • フルクラス名を有効にしますIntelliSense
  • 各cssファイルのタイプ定義が必要です。そうでない場合、tscコンパイラーは失敗します

適切なIntelliSenseのために、Webpackは各cssファイルのタイプ定義を生成する必要があります。

  1. Webpack typings-for-css-modules-loader を使用します

    webpackConfig.module.loaders: [
  { test: /\.css$/, loader: 'typings-for-css-modules?modules' }
  { test: /\.scss$/, loader: 'typings-for-css-modules?modules&sass' }
];

  2. ローダーは、コードベースのcssファイルごとに*.css.d.tsファイルを生成します

  3. TypeScriptコンパイラは、cssインポートが文字列型のプロパティ（クラス名）を持つモジュールであることを理解します。

typings-for-css-loaderには バグ が含まれているため、ファイル生成遅延のタイプのため、*.cssファイルがまだ生成されていない場合はグローバル*.css.d.tsタイプを宣言することをお勧めします。

小さなバグ シナリオ：

  1. CSSファイルcomponent.cssを作成します
  2. コンポーネントに含めるimport * as css from './component.css'
  3. webpackを実行します
  4. TypeScriptコンパイラはコードをコンパイルしようとします（エラー）
  5. ローダーはCssモジュールのタイピングファイル（component.css.d.ts）を生成しますが、TypeScriptコンパイラが新しいタイピングファイルを見つけるのが遅れています
  6. webpackを再度実行すると、ビルドエラーが修正されます。

簡単な修正方法は、CSSモジュールをインポートするためのグローバル定義（たとえば、ソースルートのtypings.d.tsというファイル）を作成することです。

declare module '*.css' {
  interface IClassNames {
    [className: string]: string
  }
  const classNames: IClassNames;
  export = classNames;
}

この定義は、生成されたcssファイルがない場合（たとえば、新しいcssファイルを追加した場合）に使用されます。それ以外の場合は、生成された特定のが使用されます（同じフォルダーにあり、ソースファイル+ .d.ts拡張子と同じ名前が必要です）。 component.css.d.ts定義とIntelliSenseは完全に機能します。

component.css.d.tsの例：

export const wrapper: string;
export const button: string;
export const link: string;

そして、生成されたCSSタイピングを見たくない場合は、IDEでソースを拡張子.css.d.tsを持つすべてのファイルを隠すためにフィルターを設定できます。

30
Jurosh

Global.d.tsまたはtypings.d.tsという名前のファイルを、いくつかのタイプ定義とともに./srcフォルダーに追加しました。

declare module "*.module.css";

Webpack css config：

{
  test: /\.css$/,
  use: [
    isProductionBuild ? MiniCssExtractPlugin.loader : "style-loader",
    {
      loader: "css-loader",
      options: {
        modules: true,
        importLoaders: 1,
        localIdentName: "[name]_[local]_[hash:base64]",
        sourceMap: true,
        minimize: true
      }
    }
  ]
},

次に、次のようにモジュールをインポートします：import styles from "./App.module.css";

7
wiesson

またはrequire webpack関数を使用してインポートする

これは、私がusedを使用し、そこにあるいくつかのプロジェクトでそのコードを保持するためのものです。

さて、私はtypestyleを書きました： http://typestyle.github.io/#/ ですが、使う必要はありません。それがあなたを幸せにするなら、const styles = require('./styles.css')に固執するだけです。 FWIW http://typestyle.github.io/#/raw 必要に応じて、typestyleで生のcssを使用することもできます

0
basarat