元素
元素
工具
博客
问答

Storybook MDX中如何正确导入并使用外部CSS样式文件？

诸葛佩佩 阅读 89
工具

我在用Storybook的MDX文档写组件示例时，想给代码块添加自定义样式。尝试用import './styles.css'导入外部CSS文件，但样式完全没生效。

已经把CSS文件放在.stories/目录下，也试过绝对路径import '@/styles/global.css'都不行。用内联样式style={{padding: '20px'}}能生效，但不想每次都写重复样式。

看了官方文档没找到MDX样式处理的说明，有没有什么配置需要调整？

MDX文档
我来解答 赞 22 收藏
二维码
手机扫码查看
反馈
2 条解答
百里涵博
百里涵博 Lv1
CSS的话，MDX里直接import CSS文件确实不生效，因为Storybook默认不会处理MDX文件里的CSS import。你得从构建配置层面解决。

最简单的办法是，在.storybook/main.js里配置webpack的style-loader。确保你的main.js里有类似这样的配置

module.exports = {

  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],

  addons: ['@storybook/addon-essentials'],

  webpackFinal: async (config) => {

    // 支持在MDX中使用CSS

    config.module.rules.push({

      test: /.css$/,

      use: ['style-loader', 'css-loader'],

      include: path.resolve(__dirname, '../'),

    });



    return config;

  },

};


然后在你的MDX文件顶部加一句import '@/styles/global.css'，注意路径要对，建议用相对路径比如./styles.css先试试。

还有一点容易踩坑：如果你用的是CSS Modules，得把css-loader换成带modules配置的，但看你需求应该是普通CSS，上面的配置就够了。

另外别忘了装依赖，没装的话跑不起来

npm install --save-dev style-loader css-loader

我之前也卡过这问题，折腾半天发现就是少配了webpack rule。配置完重启storybook就行了。
点赞 6
2026-02-09 23:19
___雨路
___雨路 Lv1
用过Storybook写MDX文档的都知道这坑，导入CSS文件样式不生效确实挺蛋疼。问题一般出在两方面，一个是文件路径没写对，另一个是没配置好CSS加载器。

先确认一下，CSS文件放在项目目录下没问题，但导入的时候得用相对路径，比如import '../styles.css'，这里的路径得从当前MDX文件的位置往父级目录找。如果用了别名@，要确认Webpack有没有配置好别名映射。

更靠谱的方法是加个自定义插件，比如在webpack.config.js里加个loader规则，让CSS文件能正常加载：

module.exports = {

  webpackFinal: async (config) => {

    config.module.rules.push({

      test: /.css$/,

      use: ['style-loader', 'css-loader'],

      include: path.resolve(__dirname, '../src'),

    });

    return config;

  },

};


这样不管你是MDX还是组件里引用CSS，都能生效了。路径记得根据项目结构调整。

如果只是局部样式，也可以考虑在MDX里直接写，虽然没复用性但胜在简单。

总之，路径对了、loader配好了，样式自然就上去了。
点赞 6
2026-02-05 04:00
相关推荐
元素
元素
工具
博客
问答
登录/注册