Storybook UI 包含 CSS 个模块且更少

Question

是否可以将 Storybook UI 与 React、CSS 模块和 Less 一起使用？有没有人设法配置这种设置？

Answer 1

我有同样的情况。通过将 webpackFinal 添加到 .storybook/main.js 来解决：

module.exports = {
    stories: ['../src/**/*.stories.[tj]s'],
    webpackFinal: async (config, { configType }) => {
        config.module.rules.push(
            {
                test: /\.less$/,
                use: [
                    require.resolve('style-loader'),
                    {
                        loader: require.resolve('css-loader'),
                        options: {
                            modules: true,
                            importLoaders: 1,
                            localIdentName: '[name]__[local]___[hash:base64:5]'
                        },
                    },
                    require.resolve('less-loader')
                ]
            },
        );
        return config;
    },
};

Answer 2

添加 .storybook/webpack.config.js 帮助我解决了问题

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader'],
            }, {
                test: /\.css$/,
                use: {
                    loader: "css-loader",
                    options: {
                        modules: true,
                    }
                }
            }
        ],
    },
}

Answer 3

以sass为例：

第一步：在main.js中配置webpack。您可以在此处找到文档：https://storybook.js.org/docs/configurations/custom-webpack-config/

const path = require('path');

module.exports = {
    webpackFinal: async (config, { configType }) => {
        // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
        // You can change the configuration based on that.
        // 'PRODUCTION' is used when building the static version of storybook.

        // Make whatever fine-grained changes you need
        config.module.rules.push({
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader'],
            include: path.resolve(__dirname, '../'),
        });

        // Return the altered config
        return config;
    },
    stories: ['../stories/**/*.stories.js'],
};

步骤 2：安装 sass-loader https://webpack.js.org/loaders/sass-loader/

第 3 步：创建您的 scss 文件

@import "../stories/main.scss";

h1{color:$mediumBlue}

Answer 4

修改你的.storybook.main.js

module.exports = {
  stories: ['../src/**/*.stories.js'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
  webpackFinal: async (webpackConfig, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.
    const { loadCracoConfig } = require('@craco/craco/lib/config');
    const { getCraPaths } = require('@craco/craco/lib/cra');
    const context = {env: process.env.NODE_ENV};
    const cracoConfig = loadCracoConfig(context);
    context.paths = getCraPaths(cracoConfig);
    const {overrideWebpackConfig} = require('@semantic-ui-react/craco-less');
    overrideWebpackConfig({
      context,
      webpackConfig
    });

    // Return the altered config
    return webpackConfig;
  },
};

本文摘自node_modules/@craco/craco/scripts/start.js

Answer 5

localIdentName 选项在 css-loader 配置中移动，因此这是新配置。来源：https://github.com/rails/webpacker/issues/2197#issuecomment-517234086

module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.less$/,
      use: [
        require.resolve('style-loader'),
        {
          loader: require.resolve('css-loader'),
          options: {
            importLoaders: 1,
            modules: {
              localIdentName: '[name]__[local]___[hash:base64:5]',
            },
          },
        },
        require.resolve('less-loader'),
      ],
    });
    return config;
  },
};

Storybook UI 包含 CSS 个模块且更少

Storybook UI with CSS modules and Less

less

reactjs

webpack

storybook