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

Question

我做了一些编辑，如下所示。

我正在使用React (18.2.0)， Typescript(4.8.4)和Webpack(5.75.0)的组合。我试图添加一些样式到我的应用程序，我试图使用CSS模块。我尝试了一些Webpack配置，没有一个能让Webpack使用正确的加载器。我已经尝试了一些其他的加载器变体(如注释部分所示)，它们都不能工作。

我正在使用类似于这个答案的方法来导入样式表(声明一个src/Globals.d)。将typescript-plugin-css-modules编译器插件设置为tsc，并导入为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)可以自动完成。css文件中定义的类从import * as styles from './styles.module.css'，但如果我console.log()它之前，我返回我的TSX，我总是看到一个未定义的值。通过在浏览器检查器中查找内联样式，我已经确认了修改后的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组成的模块遵循任何高级模块规则，并且总是默认导入它们。