如何在HTML版Storybook Docs页面自动展示CSS/Sass源码？

针对HTML版Storybook无法自动展示导入的Sass源码的问题，可通过以下几种方式解决：

1. 配置Webpack直接导入Sass源码文本 #

Storybook默认会将Sass编译为CSS，无法直接获取源码，需要修改Webpack配置让其以文本形式加载Sass文件：

• 若使用Webpack 4，先安装raw-loader：

  npm install raw-loader --save-dev
  

• 在.storybook/main.js中添加Webpack规则：

  const path = require('path');
  
  module.exports = {
    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
    addons: ['@storybook/addon-docs'],
    webpackFinal: async (config) => {
      // 添加Sass源码加载规则
      config.module.rules.push({
        test: /\.scss$/,
        use: ['raw-loader'],
        include: path.resolve(__dirname, '../src/components'), // 替换为你的组件Sass文件路径
        enforce: 'pre'
      });
      return config;
    },
  };
  

• 若使用Webpack 5，无需安装额外loader，直接使用内置的资源类型：

  const path = require('path');
  
  module.exports = {
    // ...其他配置
    webpackFinal: async (config) => {
      config.module.rules.push({
        test: /\.scss$/,
        type: 'asset/source',
        include: path.resolve(__dirname, '../src/components'),
      });
      return config;
    },
  };
  

2. 在Stories中导入并展示Sass源码 #

配置完成后，即可在stories文件中导入Sass源码，并通过Docs参数或MDX文档展示：

方式一：通过Stories参数合并展示 #

在stories文件中同时导入HTML和Sass源码，配置Docs的source参数合并展示：

import ExampleComponent from './ExampleComponent.html';
import sassSource from './ExampleComponent.scss';

export default {
  title: 'Components/ExampleComponent',
  component: ExampleComponent,
  parameters: {
    docs: {
      source: {
        code: `${sassSource}\n\n${ExampleComponent}`
      }
    }
  }
};

export const Default = () => ExampleComponent;

方式二：使用MDX文档分开展示HTML和Sass #

创建MDX文件作为组件的Docs页面，更灵活地组织内容：

import { Meta, Story, CodeBlock } from '@storybook/addon-docs/html';
import ExampleComponent from './ExampleComponent.html';
import sassSource from './ExampleComponent.scss';

<Meta title="Components/ExampleComponent" component={ExampleComponent} />

# ExampleComponent

## 组件预览
<Story name="Default">{ExampleComponent}</Story>

## HTML 源码
<CodeBlock language="html">{ExampleComponent}</CodeBlock>

## Sass 源码
<CodeBlock language="scss">{sassSource}</CodeBlock>

关键说明 #

Storybook的HTML插件默认仅处理HTML文件的源码展示，Sass作为预编译文件会被Webpack编译为CSS后注入页面，不会保留原始源码。通过上述配置，我们强制Webpack以纯文本形式加载Sass文件，从而能在Docs页面中直接引用和展示。

内容的提问来源于stack exchange，提问作者B3rserk