的原因可能是配置不正确或者缺少必要的loader。以下是解决此问题的步骤:
npm install css-loader style-loader
module.exports = {
// ...其他配置
module: {
rules: [
// ...其他规则
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
};
.module.css
的形式命名,例如styles.module.css
。import React from 'react';
import styles from './styles.module.css';
const Button = () => {
return <button className={styles.button}>Click me</button>;
};
export default Button;
在上面的代码中,styles
是一个包含所有CSS类名的对象,你可以通过styles.button
来访问具体的类名。
import React from 'react';
import styles from './styles.module.css';
const Button = ({ variant }) => {
return <button className={`${styles.button} ${styles[variant]}`}>Click me</button>;
};
export default Button;
在上面的代码中,variant
是一个动态传入的prop,你可以根据需要在CSS模块中定义不同的类名,并通过模板字符串动态地应用。
总结一下,要在带有webpack配置的typescript react中使用css模块,你需要安装必要的loader,配置webpack以处理CSS模块,并在React组件中导入和使用CSS模块。
腾讯云相关产品推荐:如果你需要部署和托管你的React应用程序,可以使用腾讯云的云托管(CloudBase)服务。云托管是一种无服务器的云端一体化解决方案,提供自动化部署、弹性扩缩容、按量计费等功能。你可以在腾讯云的云托管页面了解更多信息:云托管(CloudBase)
希望以上信息能对你有帮助!如有其他问题,请随时提问。
领取专属 10元无门槛券
手把手带您无忧上云