21

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")()]
    }
}

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

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

ツリー.css

.h3{
    color: red;
}

私が何をしていても (インポート構文を変更しようとしたり、ここで説明されている ts-loader の「require」を宣言しようとしたりしましたが、常に次のようになります:

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

実行時と

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

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

4

5 に答える 5

14

importTypeScript にとって特別な意味があります。これは、TypeScript がインポートされているものを読み込んで理解しようとすることを意味します。正しい方法は、requireあなたが言及したように定義することですが、var代わりにimport：

var styles = require('../../../css/tree.css')`
于 2016-01-26T13:40:01.003 に答える
2

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

于 2016-05-20T18:41:00.493 に答える