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

Posted 2023-02-19

【中文标题】如何在 Storybook 中为 Angular 启用样式源映射

【英文标题】：How to enable style source maps for Angular in Storybook

【发布时间】：2021-07-01 17:49:30

【问题描述】：

我正在尝试使用 Angular 和 Storybook 启用源地图。我在 updating the webpack config 上查阅了 Storybook 文档，但无济于事。添加新规则失败时，我尝试使用以下内容更新 .storybook/main.js 中默认 webpack 配置中已经存在的规则：

    //...
    webpackFinal: async (config, configType) => 
        if(configType === 'DEVELOPMENT') 
            config.devtool = 'source-map';

            config.module.rules[1].test = /\.scss$/;
            config.module.rules[1].use[1].options.sourceMap = true;
            config.module.rules[1].use[2].options.sourceMap = true;
        

        return config;
    

当我记录配置时，我看到我的更改在最终配置中，但我仍然没有按预期获得源映射：

以下是我在更改后从最终配置中得到的内容。同样奇怪的是test 字段似乎没有发生变化：

      
        "exclude": [],
        "test": ,
        "use": [
          
            "loader": "/Users/mike.v.m/workspace/ng-farmers/node_modules/raw-loader/dist/cjs.js"
          ,
          
            "loader": "/Users/mike.v.m/workspace/ng-farmers/node_modules/postcss-loader/src/index.js",
            "options":  "ident": "embedded", "sourceMap": false 
          ,
          
            "loader": "/Users/mike.v.m/workspace/ng-farmers/node_modules/sass-loader/dist/cjs.js",
            "options": 
              "implementation": 
                "info": "node-sass\t4.14.1\t(Wrapper)\t[javascript]\nlibsass  \t3.5.5\t(Sass Compiler)\t[C/C++]",
                "types": ,
                "TRUE": ,
                "FALSE": ,
                "NULL": 
              ,
              "sourceMap": false,
              "sassOptions": 
                "precision": 8,
                "includePaths": [],
                "outputStyle": "expanded"
              
            
          

【参考方案1】：

我找到了这个解决方案

webpackFinal: (config,  configType ) => 
// https://storybook.js.org/docs/react/configure/webpack
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
const include = path.resolve(__dirname, '../');
const ruleChanger = (rule) => 
  delete rule.rules;
  rule.include = include;

config.module.rules.forEach(rule => 
  const pattern = rule.test.toString();
  if(pattern === '/\\.(?:less)$/i') 
    ruleChanger(rule)
    rule.use = ['style-loader', 'css-loader', 'less-loader'];

   else if(pattern === '/\\.(?:css)$/i') 
    ruleChanger(rule)
    rule.use = ['style-loader', 'css-loader'];
  
)
return config;

,