如何在 Storybook 中為 Angular 啟用樣式源映射

Question

我正在嘗試使用 Angular 和 Storybook 啟用源映射。 我已查閱有關更新 webpack 配置的 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"
              }
            }
          }

Answer 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;

},