Пользовательский интерфейс Storybook с модулями CSS и менее

Question

Можно ли использовать интерфейс Storybook с модулями React, CSS и менее? Кому-нибудь удалось настроить такую ​​настройку?

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

Например, sass:

Шаг 1 : настроить webpack в main. js. Документацию можно найти здесь: 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 : создание файлов s css

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

h1{color:$mediumBlue}

Answer 3

Добавление .storybook / webpack.config. js помогло мне решить проблему с

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