web-dev-qa-db-ja.com

ReactコンポーネントでCSSモジュールを使用する、webpackで作成されたTypeScriptを使用する

Reactアプリケーションで、webpackの 'modules'オプションを指定してcss-loaderを使用します。 この例 が私の出発点でした（ Babel、webpackおよびReact）。

webpack設定

var webpack=require('webpack');
var path=require('path');
var ExtractTextPlugin=require("extract-text-webpack-plugin");

module.exports={
    entry: ['./src/main.tsx'],
    output: {
        path: path.resolve(__dirname, "target"),
        publicPath: "/assets/",
        filename: 'bundle.js'
    },
    debug: true,
    devtool: 'eval-source-map',
    plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ],
    resolve: {
        extensions: ['', '.jsx', '.ts', '.js', '.tsx', '.css', '.less']
    },
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loader: 'ts-loader'
            },
            {
                test: /\.tsx$/,
                loader: 'react-hot!ts-loader'
            }, {
                test: /\.jsx$/,
                exclude: /(node_modules|bower_components)/,
                loader: "react-hot!babel-loader"
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader: "babel-loader"
            }, {
                test: /\.css/,
                exclude: /(node_modules|bower_components)/,
                loader: ExtractTextPlugin.extract('style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader')
            }
        ]
    },
    plugins: [
        new ExtractTextPlugin("styles.css", {allChunks: true})
    ],
    postcss: function() {
        return [require("postcss-cssnext")()]
    }
}

これはReact付属のCSSファイルでスタイルを設定したいコンポーネントです：

import React = require('react');
import styles = require('../../../css/tree.css')

class Tree extends React.Component<{}, TreeState> {
...

    render() {
        var components = this.state.components
        return (
            <div>
                <h3 className={styles.h3} >Components</h3>
                <div id="tree" className="list-group">
                    ...
                </div>
            </div>
        )
    }
}

    export = Tree

tree.css

.h3{
    color: red;
}

私が何をしているかにかかわらず（インポート構文の変更を試み、ts-loaderの 'require'を宣言しようとしました here と説明されています）、常に次のようになります。

キャッチされないエラー：モジュール "../../../css/tree.css"が見つかりません

実行時および

エラーTS2307：モジュール '../../../css/tree.css'が見つかりません。

tSコンパイラによって。何が起こっていますか？ css-loaderがICSSを発行していないように思えますか？または、ts-loaderの動作が間違っていますか？

javascriptreactjstypescriptwebpackreact-css-modules
20
Shady

importはTypeScriptにとって特別な意味を持っています。つまり、TypeScriptはインポートされるものをロードして理解しようとします。正しい方法は、あなたが述べたようにrequireを定義することですが、varではなくimportを定義します。

var styles = require('../../../css/tree.css')`
12
James Brantly
  1. ts-loader documentation に従って「require」を宣言します。
  2. <any>タイプのジェネリックとして 'require'を使用します：require <any>（ "../ .. /../css/tree.css")。

* .d.tsファイル

declare var require: {
   <T>(path: string): T;
   (paths: string[], callback: (...modules: any[]) => void): void;
   ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
};

* .tsxファイルとコンポーネント

const styles = require<any>("../../../css/tree.css");
...
<h3 className={styles.h3}>Components</h3>

私はそれがすでに回答されていることを知っていますが、CSSファイルのコンテンツにアクセスできなかったことなしに、ジェネリック型仕様を使用する必要があることに気付く前に、しばらくの間苦労していました。 （エラーが発生しました：プロパティ 'h3'はタイプ '{}'に存在しません。）

8
Martin

CSSモジュール.cssファイルから.d.tsファイルを作成する https://github.com/Quramy/typed-css-modules を使用できます。こちらもご覧ください https://github.com/css-modules/css-modules/issues/61#issuecomment-220684795

2
Yosuke Kurami

同様の問題がありました。私にとって、作品のインポート：

import '../../../css/tree.css';

Webpackは他の通常のインポートと同様にこれを変更します。それを

__webpack_require__(id)

1つの欠点は、スタイル変数の制御を失うことです。

2
Krzysztof Sztompka

ゲームに少し遅れますが、tree.css.d.tsというファイルをtree.cssと同じフォルダーに作成し、次の行を含めることができます。

export const h3: string;

インポートステートメントimport * as styles from ...でも、コードの完了とコンパイル時のチェックが行われます。

これらの定義ファイルを手動で管理するか、typed-css-modulesをビルドパイプラインに統合することができます（ https://github.com/Quramy/typed-css-modules ）

0
Gareth Evans