如何在 TypeScript 文件中導入 CSS 模塊？

Question

我做了一些編輯，如下所列。

我正在使用 React (18.2.0)、Typescript (4.8.4) 和 Webpack (5.75.0) 的組合。 我正在嘗試向我的應用程序添加一些樣式，並嘗試使用 CSS 模塊。 我已經嘗試了一些 Webpack 配置，但沒有一個會導致 Webpack 使用正確的加載器。 我已經嘗試了其他幾種加載器變體（如注釋掉的部分所示），但它們都不起作用。

我正在使用類似於此答案的方法來導入樣式表（聲明 src/Globals.d.ts，為 tsc 設置 typescript-plugin-css-modules 編譯器插件，並導入為import * as styles from './styles.module.css' )

樣式表導入

import * as styles from './ResultCount.module.css'

export const ResultCount = () => {
  const orders = useSelector((state: ReducedState) => state.all.orders)
  console.log('result count style name', styles.results) // always undefined

  return <p className={styles.results}>

src/Globals.d.ts

declare module '*.module.css'

這是我得到的錯誤，無論我使用的加載器配置如何

cached modules 1.59 MiB (javascript) 27.4 KiB (runtime) [cached] 131 modules
./src/components/Order/styles.module.css 96 bytes [built] [1 error]

ERROR in ./src/components/Order/styles.module.css 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> .order {
...

有人能告訴我我在 webpack.config.ts 文件中做錯了什么嗎？

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: {
          transpileOnly: true
        },
        exclude: /dist/
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: "[name]_[local]_[hash:base64]",
              sourceMap: true,
              minimize: true
            }
          }
        ]
      },
      // {
      //   test: /\.css$/,
      //   include: path.join(__dirname, 'src/components'),
      //   loader: 'css-loader',
      //   //use: ['style-loader', 'css-loader']
      //   // use: [
      //   //   'style-loader',
      //   //   {
      //   //     loader: 'typings-for-css-modules-loader',
      //   //     options: {
      //   //       modules: true,
      //   //       namedExport: true
      //   //     },
      //   //   },
      //   //   'css-loader',
      //   // ],
      // },
    ]
  },

編輯

我發現必須重新啟動 webpack 服務才能使這些更改生效（即使重新加載已打開）。 新問題是：雖然 Webpack 成功構建，但 .ts 文件中類的任何導入都會返回undefined 。 因此 styles 均未應用。 我更新了標題以反映新問題。

奇怪的是，我的語言服務器 (tsserver) 可以自動完成 .css 文件中定義的類 from import * as styles from './styles.module.css' ，但是如果我在返回我的之前使用 console.log() 它TSX，我總是看到一個未定義的值。 我已經通過在瀏覽器檢查器中找到內聯 styles 來確認損壞的 CSS 模塊名稱在最終呈現的頁面中。 我還嘗試聲明一個 styles.module.css.d.ts 文件（盡管由於 Typescript 插件我不需要）以防萬一，但這仍然沒有解決問題。 我也嘗試過（從這個答案）將styles.module.css重命名為<component name here>.module.css但這也沒有用。

有誰知道這可能是什么原因造成的？

Answer 1

import * as styles from "module-path"; 在語義上不同於import styles from "module-path"; . 基本上不要假設這些非 javascript 組成的模塊遵循任何高級模塊規則並始終默認導入它們。