带有 CSS 模块和更少的 Storybook UI

Posted 2023-02-19

【中文标题】带有 CSS 模块和更少的 Storybook UI

【英文标题】：Storybook UI with CSS modules and Less

【发布时间】：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";

h1color:$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;
  ,
;