21

我想在用 Typescript 编写的 React 应用程序中将 css-loader 与 webpack 的“模块”选项一起使用。这个例子是我的起点（他们使用 Babel、webpack 和 React）。

网络包配置

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

import对 TypeScript 有特殊的意义。这意味着 TypeScript 将尝试加载和理解正在导入的内容。正确的方法是require像你提到的那样定义，var而不是import：

var styles = require('../../../css/tree.css')`
于 2016-01-26T13:40:01.003 回答
9
  1. 根据ts-loader 文档声明“要求” 。
  2. 将 'require' 用作具有< any >类型的泛型：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”。）

于 2016-03-19T21:35:05.347 回答
2

我有类似的问题。对我来说，作品导入：

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

Webpack 像任何其他正常的导入一样改变它。它将它更改为

__webpack_require__(id)

一个缺点是您失去了对样式变量的控制。

于 2016-01-26T13:28:43.970 回答
2

您可以使用https://github.com/Quramy/typed-css-modules，它从 CSS 模块 .css 文件创建 .d.ts 文件。另请参阅https://github.com/css-modules/css-modules/issues/61#issuecomment-220684795

于 2016-05-20T18:41:00.493 回答
0

游戏有点晚了，但您可以在与 tree.css 相同的文件夹中创建一个名为 tree.css.d.ts 的文件，其中包含以下行：

export const h3: string;

并且仍然使用 import 语句import * as styles from ...，您仍然会得到代码完成和编译时间检查。

您可以手动管理这些定义文件，也可以将 typed-css-modules 集成到构建管道中（https://github.com/Quramy/typed-css-modules）

于 2017-02-05T00:05:05.280 回答