Storybook配置antd less-loader报Inline JavaScript未启用错误

配置不生效的核心原因是webpack loader按数组顺序从前往后匹配，先命中的规则优先生效：

• @storybook/preset-create-react-app 预设本身已经内置了处理.css、.less文件的loader规则
• 你用push把自定义规则加到了规则列表末尾，antd的less文件会先被预设自带的规则捕获，你写的带javascriptEnabled: true的规则根本没机会执行
• 预设自带的less-loader默认没开javascriptEnabled，解析antd里用到的bezierEasingMixin内联JS时就会抛错。

不要直接追加规则，要么修改已有less规则的配置，要么把自定义规则放到更高优先级位置，参考配置如下：

addons: [
    // 其他原有addon配置保留
    {
      "name": "@storybook/preset-create-react-app",
      "options": {
        "craOverrides": {
          "fileLoaderExcludes": ["less"]
        }
      }
    }
],
webpackFinal: async (config) => {
    // 第一步：先遍历已有规则，给预设自带的less-loader补上javascriptEnabled配置
    config.module.rules.forEach(rule => {
      if (!rule.test || !rule.test.toString().includes('.less')) return
      if (!Array.isArray(rule.use)) return
      rule.use.forEach(useItem => {
        if (typeof useItem !== 'object' || !useItem.loader?.includes('less-loader')) return
        useItem.options = {
          ...useItem.options,
          lessOptions: {
            ...(useItem.options?.lessOptions || {}),
            javascriptEnabled: true
          }
        }
      })
    })

    // 第二步：如果需要补充全局less处理规则，用unshift加到规则列表最前，保证优先命中
    config.module.rules.unshift({
      test: /\.(le|c)ss$/,
      // 排除css module文件，避免和项目原有module规则冲突
      exclude: /\.module\.(le|c)ss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: { modules: false }
        },
        {
          loader: 'less-loader',
          options: {
            lessOptions: { javascriptEnabled: true }
          }
        }
      ]
    })

    return config 
}

如果改完还是报错，可以在webpackFinal里打印config.module.rules，确认实际命中antd less文件的loader链中，less-loader确实带上了javascriptEnabled: true配置，很快就能定位到是哪条规则优先级不对。

内容的提问来源于stack exchange，提问作者Adam Jenkins