引入storybook后，如何配置才能加载上样式？

[michael-lu-cn]

目前通过网络上搜索，可以应用 ant 的样式。

但是无法加载自定义的写在less里的组件样式。不能识别css module。

谢谢！

目前的 .storybook/webpack.config.js 配置如下 `const path = require("path");

module.exports = { module: { rules: [ { loader: 'babel-loader', exclude: /node_modules/, test: /.js$/, options: { presets: ["@babel/react"], plugins: [ ['import', {libraryName: "antd", style: true}] ] }, }, { test: /.less$/, loaders: [ "style-loader", "css-loader", { loader: "less-loader",

        options: {
          // modifyVars: {"@primary-color": "#d8df19"},
          javascriptEnabled: true,
          modules: true,
          localIdentName: "[name]__[local]___[hash:base64:5]",
          importLoaders: 1,

        }
      }
    ],
    include: path.resolve(__dirname, "../src")
  },

]

} }; `

[chenshuai2144]

我们没有做过这方面的尝试，如果你的问题可以更加具体一些我们有可能提供帮助。 等待社区想相关实践的同学来帮你 吧

[cncolder]

你需要找到 AntdP 的 webpack 配置, 实际上是 umi webpack 的配置.

然后按需合并到 storybook webpack 配置里

这是刚出炉的 .storybook/webpack.config.js

const getConfig = require('af-webpack/getConfig').default;

// umi webpack config
const umiConfig = getConfig({ cwd: process.cwd() });

const umiRules = umiConfig.module.rules.filter(
  rule => rule.test && rule.test.source.includes('.less'),
);

const umiPlugins = umiConfig.plugins.filter(
  plugin => plugin.constructor && plugin.constructor.name === 'MiniCssExtractPlugin',
);

module.exports = ({ config, mode }) => {
  const mergedConfig = {
    ...config,
    module: {
      ...config.module,
      rules: [...config.module.rules, ...umiRules],
    },
    plugins: [...config.plugins, ...umiPlugins],
  };

  return mergedConfig;
};