如何在Storybook中为Angular启用样式源映射

在Storybook中为Angular启用样式源映射，可以按照以下步骤进行操作：

首先，确保你已经安装了Storybook和Angular，并且已经创建了一个Angular项目。
在Angular项目的根目录下，创建一个名为.storybook的文件夹，并在该文件夹下创建一个名为webpack.config.js的文件。
在webpack.config.js文件中，添加以下代码来启用样式源映射：

const path = require('path');

module.exports = ({ config }) => {
  // Enable CSS source maps
  config.module.rules.push({
    test: /\.scss$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          sourceMap: true,
        },
      },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: true,
        },
      },
    ],
    include: path.resolve(__dirname, '../'),
  });

  return config;
};

在Angular项目的根目录下，创建一个名为.angular-cli.json的文件（如果已存在，请忽略此步骤）。
在.angular-cli.json文件中，找到apps数组中的对象，并添加以下代码来启用样式源映射：

"apps": [
  {
    "styles": [
      "styles.scss"
    ],
    "stylePreprocessorOptions": {
      "includePaths": [
        "src/styles"
      ],
      "sourceMap": true
    }
  }
]

现在，你可以在Storybook中使用样式源映射了。在你的组件的.stories.ts文件中，导入你的样式文件，并在addDecorator函数中使用withStyles函数来启用样式源映射。示例如下：

import { addDecorator } from '@storybook/angular';
import { withStyles } from '@storybook/addon-styles/angular';

import '../path/to/your/styles.scss';

addDecorator(withStyles);

运行Storybook，并查看你的组件，你应该能够在开发者工具的样式面板中看到样式源映射。

总结：在Storybook中为Angular启用样式源映射的步骤包括创建webpack配置文件、配置Angular项目的样式源映射选项、导入样式文件并使用withStyles函数启用样式源映射。这样可以方便地调试和定位样式问题。腾讯云相关产品中，可以使用腾讯云云服务器（CVM）来搭建Storybook环境，详情请参考腾讯云云服务器产品介绍。