如何在 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

。所以没有应用任何样式。我已更新标题以反映新问题。

奇怪的是，我的语言服务器（tsserver）可以自动完成

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

.css 文件中定义的类，但是如果我在返回 TSX 之前对其进行 console.log() ，我总是会看到一个未定义的值。通过在浏览器检查器中查找内联样式，我已确认损坏的 CSS 模块名称位于最终呈现的页面中。我还尝试声明一个 styles.module.css.d.ts 文件（尽管由于 Typescript 插件我不需要这样做）以防万一，但这仍然没有解决问题。我也尝试过（从这个answer）将

styles.module.css

重命名为

<component name here>.module.css

，但这也不起作用。

有谁知道这可能是什么原因造成的？

Answer 1

import * as styles from "module-path";

在语义上与

import styles from "module-path";

不同。基本上不要假设这些非 javascript 组成的模块遵循任何高级模块规则并始终默认导入它们。

编辑：这个答案有点过时了，因为从css-loader

的版本7.0.0开始，默认方式实际上是模块导入，即

import * as styles from "module-path";

，在这种情况下，

styles.default

将引用

.default 

css 模块文件中的类声明，而不是该文件的默认导出css-but-actually-js-模块。如果从模块导入更改为默认导入在 2024 年 4 月 4 日之后解决了您的问题，则意味着您存在依赖问题。