Question

我正在尝试使用带有Typescript的CSS模块。

我尝试了这种配置。

Webpack配置

const path = require("path");
module.exports = {
    entry: "./client/index.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx", ".js", ".json", ".css"]
    },

    module: {
        rules: [
            { test: /\.css$/, loader: 'typings-for-css-modules?modules' },
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            {
                test: /\.tsx?$/, loader: "ts-loader", options: {
                    configFile: __dirname + "/tsconfig.client.json"
                }
            },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },

};

我想使用带有Stylus编写的样式代码的CSS模块。因此，我不能为此目的使用打字稿语言服务。

我不介意不使用这个webpack插件。如果有替代解决方案，欢迎发表评论。我想知道这方面的最佳实践！

其他文件

此代码有./client/index.tsx和./client/test.css。

./client/index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import * as CSS from "./test.css";

class ControlPanelRoot extends React.Component<any, any> {
    public render() {
        return (
            <div>
                <img src="../public/logo.png" />
            </div>
        );
    }
}

./client/test.css

.aa{
    height: 100px;
    color: white;
}

.bb{
    display: inline;
}

但是没有生成定义文件。

Answer 1

我认为您必须在.jsx中使用.css中定义的那些类，否则它们不会生成 you need to use the imported styles in your code. If you just import them but not use them in the code they will be ignored.

https://github.com/Jimdo/typings-for-css-modules-loader/issues/27

使用typings-for-css-modules-loader不能生成用于css-module的d.ts.

1 个答案: