reactjs - ts-loader/css-loader ვერ შეუძლია ფაილის იმპორტი/შეეფასოს

ვცდილობ css მოდულების დამატებას style-loader და css-loader-ის გამოყენებით. რთულია ამ ყველაფრის გასაგებად. ასევე დარწმუნებული არ ვარ, დამნაშავე ts-loader არის თუ css-loader.

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]' 
                  }
            ]
        }
    }
}

კომპონენტი

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

პ.ს. მე ვცადე extract-text-webpack-plugin-ის გამოყენება, მაგრამ ეს უბრალოდ ყველაფერს კიდევ უფრო აჩლუნგებდა და შეცდომებს უზარმაზარს ხდიდა

პასუხი #1

როდესაც ეს პრობლემა პოპულარული არ ჩანს, მე შეძლე გადაწყვეტილების პოვნა. იმედი მაქვს, ეს დაეხმარება ყველას, ვინც კრძალავს ts-loader + css-loader.

1) დაამატეთ .d.ts ფაილი, რომელიც ხელმძღვანელობს .css გაგრძელებებს

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

2) რადგან ვიყენებ Webpack 3.x-ს, შეცვალეთ style style-loader-ზე webpack.config.js-ში

    module: {
        rules: [
            //...
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
            }
        ]
    }

3) იმპორტი სტილები როგორც * კომპონენტის ფაილში

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

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

4) tsconfig.json-ში დაამატეთ .d.ts ფაილი include ნაწილში. ჩემს შემთხვევაში ეს არის...

"include": [
    "src",
    "./defs.d.ts"
],

გადატვირთეთ webpack-dev-server ან რაც არ უნდა იყოს და ყველაფერი წესზე უნდა იყოს (მომინიათ).

ბედნიერი კოდირება!