Reactjs ts加载程序/css加载程序无法导入/解析文件

尝试使用样式加载器和css加载器添加css模块。很难弄明白这一点。我也不确定是ts加载器还是css加载器

webpack.config.js

const path = require('path');

module.exports = env => {
    return {
        devtool: "inline-source-map",
        entry: "./src/index.tsx",
        output: {
            path: path.resolve(__dirname, "/public"),
            filename: "build/app.js"
        },
        resolve: {
            extensions: [".ts", ".tsx", ".js", ".json"],
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: "ts-loader",
                },
                {
                    test: /\.css$/,
                    loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
                  }
            ]
        }
    }
}

// I put it in root, but could be anywhere
// <root>/defs.d.ts
declare module "*.css" {
    var styles: { [key: string]: string };
    export = styles
}

组件

import styles from "./Main.css"; // TS2307: Cannot find module './Main.css'.

---

另外，我尝试使用

提取文本网页包插件

，但这只会把一切搞得更糟，使错误压倒一切

，因此，由于这似乎不是一个流行的问题，我设法找到了解决方案。希望这将帮助那些与

ts-loader

+

css-loader

斗争的人

1）添加处理.css扩展名的.d.ts文件

const path = require('path');

module.exports = env => {
    return {
        devtool: "inline-source-map",
        entry: "./src/index.tsx",
        output: {
            path: path.resolve(__dirname, "/public"),
            filename: "build/app.js"
        },
        resolve: {
            extensions: [".ts", ".tsx", ".js", ".json"],
        },
        module: {
            rules: [
                {
                    test: /\.tsx?$/,
                    loader: "ts-loader",
                },
                {
                    test: /\.css$/,
                    loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
                  }
            ]
        }
    }
}

// I put it in root, but could be anywhere
// <root>/defs.d.ts
declare module "*.css" {
    var styles: { [key: string]: string };
    export = styles
}

3）将样式作为组件文件中的

*

导入

// In Main.tsx
import * as styles from "./Main.css";

// Usage
<div className={styles.nameOfClass} />

重新启动WebpackDev服务器或其他任何东西，它应该可以正常运行（希望如此）

---

快乐编码

将其添加到此处并解析：{extensions:[“.ts”、“.tsx”、“.js”、“.json”、“.css”]、}、@Sujit.Warrier不起作用非常感谢您提供了此解决方案，为我节省了大量工作！：）