StoryBook:import Less not work

97 阅读1分钟

根据StoryBook官网配置less不成功,然后找啊找,找到了解决方案

{
  "@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;
},