在Typescript Storybook项目中,要使CSS模块工作,可以按照以下步骤进行操作:
npm install --save-dev style-loader css-loader
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
};
或者在webpack.config.ts文件中添加以下代码:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
};
import styles from './styles.module.css';
const MyComponent = () => {
return (
<div className={styles.container}>
<p className={styles.text}>Hello, CSS Modules!</p>
</div>
);
};
在上述代码中,styles
是通过import
语句引入的CSS模块对象,container
和text
是CSS模块中定义的类名。
npm run storybook
或者
yarn storybook
然后在浏览器中打开Storybook页面,查看组件是否正常显示,并且CSS样式是否生效。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云云开发(CloudBase)。
希望以上信息对您有所帮助!
领取专属 10元无门槛券
手把手带您无忧上云