带有 CSS 模块和更少的 Storybook UI答案

【问题标题】：Storybook UI with CSS modules and Less带有 CSS 模块和更少的 Storybook UI
【发布时间】：2020-05-02 19:22:29
【问题描述】：

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

【问题讨论】：

我知道，通过创建 CRA react 项目并运行 storybook 命令将 storybook 包含到您的 react 项目中，将自动配置 storybook、react 和 scss 编译以开箱即用地协同工作。你总是可以在 webpack 配置中为 storybook 添加一个less loader 来处理 LESS 文件。这里有关于 LESS 和故事书的讨论：github.com/storybookjs/storybook/issues/691 如果这不起作用（虽然我不明白为什么它不起作用）从 LESS 到 SASS 的跳转不是很好，所以它可能是你最好的选项

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我有同样的情况。通过将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;
    },
};

【讨论】：

【解决方案3】：

修改你的 .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

【讨论】：

【解决方案4】：

以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}

【讨论】：

【解决方案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;
  },
};

【讨论】：