storybook加载less文件不生效

最近在开发组件库，某天更新依赖后less突然不生效了，表现为组件预览页上的组件都没有样式，搜索一番后发现网上的解决方案都无效，通过打印webpack config找到了问题：官方给的storybook集成less的方案不适用我目前的版本，rules没有命中less文件，被其他loader当做file处理了。

node -v # 16.17
npm -v #8.15

依赖版本

{
  "@storybook/react": "^6.5.16"
  "@storybook/manager-webpack5": "^6.5.16"
  "@storybook/builder-webpack5": "^6.5.16",
  "less": "^4.1.3",
   "less-loader": "^11.1.0",
  "css-loader": "^6.7.3"
}

storybook的main.js

// ...
webpackFinal: async (config) => {
    const lessLoaderChain = {
      test: /\.less$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'less-loader',
          options: {
            lessOptions: {
              javascriptEnabled: true
            }
          }
        }
      ]
    }
    const oneOfRule = config.module.rules.find(rule => !!rule.oneOf);
    if (oneOfRule) {
      oneOfRule.oneOf.unshift(lessLoaderChain);
    } else {
      config.module.rules.unshift(lessLoaderChain);
    }
    
    return config;
},
// ...

最后附上本人在issue上提的解决方案