带有蚂蚁设计主题的故事书不工作

Question

我正在尝试使用 Ant Design 和自定义 Ant Design 主题设置故事书。主题使用 less css 文件来覆盖主题属性。

但是，当我尝试编写故事书时出现以下错误：

// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?

我在故事书 main.js 文件中配置了 less 以启用内联 javascript，如下所示：

module.exports = {
  stories: ['../stories/**/*.stories.tsx'],

  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-actions', 
    '@storybook/addon-essentials', 
    '@storybook/addon-backgrounds'],
  
    webpackFinal: async (config, { configType }) => {
      config.module.rules.push({
        // this is for both less and scss
        test: /.*\.(?:le|c|sc)ss$/,
        use: [{
          loader: 'style-loader'
        }, {
          loader: 'css-loader',
          options: {
            modules: false
          }
        }, {
          loader: 'less-loader',
          options: {
              javascriptEnabled: true
          }
        }, {
          loader: 'sass-loader'
        }
      ]
      });
      config.plugins.push(new MiniCssExtractPlugin({
        filename: '[name]-[contenthash].css',
        chunkFilename: '[id]-[contenthash].css',
      }));
      return config;
    },
};

如您在上面的代码片段中所见，less 加载程序将 javascriptEnabled 选项设置为 true。

任何使它起作用的建议都将不胜感激。 TIA！

编辑添加当前配置：

[
  {
    test: /\.(mjs|tsx?|jsx?)$/,
    use: [ [Object] ],
    include: [ '/Users/...' ],
    exclude: /node_modules/
  },
  {
    test: /\.js$/,
    use: [ [Object] ],
    include: /[\/]node_modules[\/](@storybook\/node-logger|are-you-es5|better-opn|boxen|chalk|commander|find-cache-dir|find-up|fs-extra|json5|node-fetch|pkg-dir|resolve-from|semver)/
  },
  { test: /\.md$/, use: [ [Object] ] },
  {
    test: /\.js$/,
    include: /node_modules\/acorn-jsx/,
    use: [ [Object] ]
  },
  { test: /\.(stories|story).mdx$/, use: [ [Object], [Object] ] },
  {
    test: /\.mdx$/,
    exclude: /\.(stories|story).mdx$/,
    use: [ [Object], [Object] ]
  },
  {
    test: /\.(stories|story)\.[tj]sx?$/,
    loader: '/Users/.../Storybook/node_modules/@storybook/source-loader/dist/index.js',
    options: { injectStoryParameters: true, inspectLocalDependencies: true },
    enforce: 'pre'
  },
  {
    test: /\.css$/,
    sideEffects: true,
    use: [
      '/Users/.../Storybook/node_modules/@storybook/core/node_modules/style-loader/dist/cjs.js',
      [Object],
      [Object]
    ]
  },
  {
    test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
    loader: '/Users/.../Storybook/node_modules/file-loader/dist/cjs.js',
    options: { name: 'static/media/[name].[hash:8].[ext]', esModule: false }
  },
  {
    test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
    loader: '/Users/.../Storybook/node_modules/url-loader/dist/cjs.js',
    query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' }
  }
]

Answer 1

问题出在您应用导入规则时没有像这样的选项：

import '!style-loader!css-loader!less-loader!../css/theme.less';

因为您已经为 .less 文件声明了规则，这意味着您只需像这样正常导入它：

import '../css/theme.less';

还有一件事，您需要改进的是将 less 和 scss 文件拆分为单独的规则，而不是将它们组合在一起，这可能会导致问题。另外，MiniCssExtractPlugin 在这里也不是必需的，因为 style-loader 用于在文档上附加样式。

简而言之，以下是您要更改的几项内容。另请阅读我的内联评论：

preview.js

import '../css/theme.less';
// In case of being keen for `scss` file
import '../css/layout.scss';

export const parameters = {
  // ...
}

main.js

module.exports = {
  stories: ['../stories/**/*.stories.tsx'],

  addons: [
    '@storybook/addon-docs',
    '@storybook/addon-actions',
    '@storybook/addon-essentials',
    '@storybook/addon-backgrounds'
  ],

  webpackFinal: async (config) => {
    config.module.rules.push({
      // this is for both less and scss
      test: /.*\.(?:le|c)ss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: false
          }
        },
        {
          loader: 'less-loader',
          options: {
            lessOptions: {
              javascriptEnabled: true
            }
          }
        }
      ]
    });
    
    // If you wish to use `scss` file
    // Keep in mind to install `sass` which I don't see it as apart of your deps
    // npm i -D sass
    config.module.rules.push({
      // this is for both less and scss
      test: /.*\.(?:sc|c)ss$/,
      use: [
        'style-loader',
        {
          loader: 'css-loader',
          options: {
            modules: false
          }
        },
        'sass-loader',
      ]
    });

    // I don't think you need this anymore since `style-loader` is being used 
    // config.plugins.push(new MiniCssExtractPlugin({
    //   filename: '[name]-[contenthash].css',
    //   chunkFilename: '[id]-[contenthash].css',
    // }));

    return config;
  },
};

就是这样！希望它能帮助你更多地了解 webpack + storybook 一起工作。

带有蚂蚁设计主题的故事书不工作

storybook with ant design theme less not working

less

webpack

antd

storybook