reactjs - Importați fișiere CSS în fișiere TypeScript folosind aliasuri, webpack


Am configurat un proiect folosind webpack, react și typescript. Acum încerc să folosesc aliasuri pentru importuri, ceea ce funcționează bine în mare parte. Totuși, nu reușesc să fac ca importarea fișierelor css să funcționeze cu aliasuri.

Am adăugat următoarea parte la webpack.config.json al meu

...
    resolve: {
        extensions: ["", ".ts", ".tsx", ".js", ".json", "css", ".scss"],
        alias: {
            BaseComponents: path.resolve(__dirname, "src", "BaseComponents"),
            Pages: path.resolve(__dirname, "src", "Pages"),
            Styles: path.resolve(__dirname, "src", "Styles"),
        },
    },
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                loader: "babel-loader",
                exclude: /node_modules/,
            },
            {
                test: /\.(css)$/,
                use: ["style-loader", "css-loader"],
            },
        ],
    },

...

și următoarea parte în tsconfig.json

...
    "paths": {
            "BaseComponents/*": ["./src/BaseComponents/*"],
            "Pages/*": ["./src/Pages/*"],
            "Styles/*": ["./src/Styles/*"],
     },
...

Importarea altor componente React și a funcțiilor normale funcționează așa cum era de așteptat.

Când scriu

import "../Styles/test.css";

funcționează bine. Dar folosind aliasul

import "Styles/test.css";

nu funcționează, deși IDE-ul nu se plânge și Intellisense funcționează atunci când tastezi în cale.

Eroarea este ERROR in ./src/BaseComponents/App.tsx 3:0-25 Module not found: Error: Can't resolve 'Styles/test.css'

Știe cineva cum să rezolve asta?

Mulțumesc.

Răspuns #1

Am o configurație similară, am avut aceeași problemă când încercam să construiesc proiectul, dar totul a funcționat bine în IDE etc. Am reușit să o rezolv instalând babel-plugin-module-resolver și configurându-l astfel:

"plugins": [
  ...,
  [
    "module-resolver",
    {
      "alias": {
        "@components": "./src/components"
      }
    }
  ]
]