Wie behebe ich Typoskript-Compilerfehler in CSS-Dateien?

Question

Ich versuche, mit Webpack ein React-Projekt mit Typoskript zu erstellen. Aber ich kann es nicht schaffen, CSS-Module zum Laufen zu bringen. Ich erhalte immer wieder diesen Fehler, wenn ich versuche, die CSS-Dateien in Typoskript zu importieren:

ERROR in src/components/Button.module.css:1:0
[unknown]: Parsing error: Declaration or statement expected.
  > 1 | .myButton {
    2 |         box-shadow: 0px 0px 0px -1px #1c1b18;
    3 |         background:linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%);
    4 |         background-color:#eae0c2;
ℹ ｢wdm｣: Failed to compile.

Für mich sieht es so aus, als würde Webpack erwarten, dass die CSS-Datei ein gültiges Typoskript enthält, aber ich weiß es nicht genau. Ich habe versucht, mich umzuschauen, und obwohl viele Leute Probleme damit zu haben scheinen, Typoskript- und CSS-Module zusammen zu verwenden, konnte ich niemanden mit einem ähnlichen Problem finden.

Ich habe die CSS-Datei folgendermaßen importiert: Button.tsx

import React from "react";
import "./Button.module.css";

export class Button extends React.Component{
...
}

Und dies ist die CSS-Datei, die ich importieren möchte. Button.module.css:

.myButton {
    box-shadow: 0px 0px 0px -1px #1c1b18;
    background:linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%);
    background-color:#eae0c2;
    border-radius:22px;
    border:4px solid #706752;
    display:inline-block;
    cursor:pointer;
    color:#505739;
    font-family:Arial;
    font-size:16px;
    font-weight:bold;
    padding:11px 22px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ffffff;
}
.myButton:hover {
    background:linear-gradient(to bottom, #ccc2a6 5%, #eae0c2 100%);
    background-color:#ccc2a6;
}
.myButton:active {
    position:relative;
    top:1px;
}

Die generierte Button.module.css.d.ts

// This file is automatically generated.
// Please do not change this file!
interface CssExports {

}
export const cssExports: CssExports;
export default cssExports;

Ich habe auch eine Typdeklaration für CSS-Module namens styles.d.ts

declare module "*.module.css" {
    const classes: { [key: string]: string };
    export default classes;
}

Während Webpack einige Typisierungen für das CSS-Modul zu generieren scheint, sieht es für mich seltsam leer aus. Ich glaube, ich mache etwas falsch mit dem CSS-Module-Typoskript-Loader. Ich habe es mit einer Reihe verfügbarer Plugins versucht, aber immer wieder auf denselben Fehler gestoßen.

Folgendes habe ich in meiner webpack.config.ts konfiguriert:

import webpack from "webpack";

const config: webpack.Configuration = {
  entry: "./src/index.tsx",
  resolve: {
    extensions: [".tsx", ".ts", ".js", ".css"],
  },
  module: {
    rules: [
      {
        test: /\.module.css$/, use: [ "css-modules-typescript-loader", { loader: 'css-loader', options: { modules: true, sourceMap: true, } }, ] }, { test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react",
              "@babel/preset-typescript",
            ],
          },
        },
      },
    ],
  },

tsconfig.json

{
  "compilerOptions": {
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "target": "ES5",
    "plugins": [
      {
        "name": "typescript-plugin-css-modules"
      }
    ]
  },
  "include": [
    "src"
  ],
}

Answer 1

Ich hatte das gleiche Problem. In meinem Fall war es nicht das Problem des Webpacks. Es war das Problem der Typoskript-Eslint. Ich habe das Problem durch Hinzufügen von "* .css" in der .eslintignore-Datei gelöst.