reactjs - שגיאה בשימוש במודולי CSS ב-Typescript React עם תצורת Webpack

יש למעשה שאלה דומה שם: איך אני מתקן שגיאות קומפילציה של TypeScript בקבצי CSS?

אז אני מנסה לייבא מודול CSS ב-TypeScript, ככה:

import * as styles from "./App.css";

//App.tsx return some jsx:

<h3 className={styles["background"]}>CSS Here</h3>

// ./App.css

.background {
    background-color: pink;
}

התקנתי את css-loader ו-style-loader עבור webpack, וגם בנוסף את חבילת "css-modules-typescript-loader": https://www.npmjs.com/package/css-modules-typescript-loader

ה־"css-modules-typescript-loader" ייצור אוטומטית קובץ חדש למטה:

// /App.css.d.ts
interface CssExports {
  'background': string;
}
export const cssExports: CssExports;
export default cssExports;

וזה קובץ ה-webpack.config.ts שלי:

import * as path from "path";
import * as webpack from "webpack";
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

const config: webpack.Configuration = {
  entry: "./src/index.tsx",
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: [
              "@babel/preset-env",
              "@babel/preset-react",
              "@babel/preset-typescript",
            ],
          },
        },
      },
      {
        test: /\.css$/,
        use: [
          "css-modules-typescript-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
            },
          },
        ],
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    path: path.resolve(__dirname, "build"),
    filename: "bundle.js",
  },
  devServer: {
    contentBase: path.join(__dirname, "build"),
    compress: true,
    port: 4000,
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      async: false,
      eslint: {
        files: "./src/**/*",
      },
    }),
  ],
};

export default config;

העניין הוא שכאשר אני מפעיל npm start, נראה שהמודול css לא מיוצא ואני ממשיך לקבל "[unknown] Parsing error: Declaration or statement expected":

איך לייבא נכון את מודולי ה-CSS? האם שגיאת הפרסינג יכולה להגיע מחבילה אחרת שאני משתמש בה (eslint/prettier)?

כל רמז יהיה מועיל, תודה.

תשובה #1

לגבי ההקלדה, אתה יכול לתקן על ידי הסרת ייבוא המרחב שמות מכיוון שההקלדה שנוצרה עכשיו מייצאת ערך ברירת מחדל. פשוט ייבא כייבוא ברירת מחדל:

import styles from "./App.css";

<h3 className={styles["background"]}>CSS Here</h3>

בנוסף, על מנת שקבצי CSS יתווספו למסמך שלך, ייתכן שתצטרך להשתמש ב-style-loader.

לגבי שגיאת הניתוח, סביר ביותר שהיא קשורה ל-linter שלך, אז נסה לבדוק איך שהגדרת אותו.