如何在 TypeScript 文件中导入 CSS 模块

我已经做了一些编辑，如下所列.

我正在使用Reaction(18.2.0)、TypeScrip(4.8.4)和webpack(5.75.0)的组合.我正在try 向我的应用程序添加一些样式，并try 使用CSS模块.我try 了几种webpack的配置，但没有一种配置会导致webpack使用正确的加载器.我已经try 了其他几种不同的加载器(如注释部分所示)，它们都不起作用.

我使用类似于this answer的方法来导入样式表(声明一个SRC/Globals.d.ts，为TSC设置类型脚本-插件-css-模块编译器插件，然后导入为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.fig.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',
      //   // ],
      // },
    ]
  },

Edit个

我发现webpack发球必须重新启动才能使这些变化生效(即使是在重新加载的情况下).新的问题是:虽然webpack成功构建，但导入.ts文件中的任何类都会返回undefined.因此，没有应用任何样式.我已经更新了标题以反映新的问题.

奇怪的是，我的语言服务器(Tsserver)可以自动完成import * as styles from './styles.module.css'中.css文件中定义的类，但是如果我在返回TSX之前对其进行sole.log()，我总是看到一个未定义的值.通过在浏览器判断器中查找内联样式，我已经确认损坏的CSS模块名称出现在最终呈现的页面中.为了以防万一，我还试着声明了一个style es.mode.css.d.ts文件(尽管由于TypeScrip插件的原因，我不需要这样做)，但这仍然没有解决这个问题.我也try 过(从这个answer)将styles.module.css重命名为<component name here>.module.css，但同样不起作用.

有人知道这可能是什么原因吗？