Next.js 在故事书中的顺风之前不能预处理全局样式

我的项目中既有Next.js又有Storybook，在使用全局样式时遇到了一些问题。所有组件都使用

scss

模块，因此组件目录结构类似于

components/myComponent/myComponent.tsx

和

components/myComponent/myComponent.module.scss

。

/styles/

中存在一些全局样式，但是当我尝试在模块中使用它们时，我得到了

@apply不能与.className一起使用，因为.className或者找不到

。我想我需要在顺风前对这些全局样式进行预处理，对吗

/storybook/main.js

const path = require("path");
const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");

module.exports = {
    stories: ["../stories/**/**/*.stories.tsx"],
    addons: [
        "@builder.io/storybook",
        "@storybook/addon-knobs",
        "@storybook/addon-a11y",
        "@storybook/addon-storysource",
        "@storybook/addon-docs",
        "@storybook/addon-viewport",
        {
            name: "@storybook/preset-scss",
            options: {
                cssLoaderOptions: {
                    modules: true,
                },
            },
        },
    ],
    webpackFinal: async (config) => {
        config.module.rules.push({
            test: /\.(scss|sass|css)$/,
            use: [
                {
                    loader: "sass-loader",
                    options: {
                        implementation: require("sass"),
                    },
                },
                {
                    loader: "postcss-loader",
                    options: {
                        ident: "postcss",
                        plugins: [tailwindcss, autoprefixer],
                    },
                },
            ],
            include: path.resolve(__dirname, "../"),
        });
        return config;
    },
};

module.exports = {
    plugins: {
        tailwindcss: {},
        "postcss-preset-env": {},
        autoprefixer: {},
    },
};

/postsss.config.js

const path = require("path");
const tailwindcss = require("tailwindcss");
const autoprefixer = require("autoprefixer");

module.exports = {
    stories: ["../stories/**/**/*.stories.tsx"],
    addons: [
        "@builder.io/storybook",
        "@storybook/addon-knobs",
        "@storybook/addon-a11y",
        "@storybook/addon-storysource",
        "@storybook/addon-docs",
        "@storybook/addon-viewport",
        {
            name: "@storybook/preset-scss",
            options: {
                cssLoaderOptions: {
                    modules: true,
                },
            },
        },
    ],
    webpackFinal: async (config) => {
        config.module.rules.push({
            test: /\.(scss|sass|css)$/,
            use: [
                {
                    loader: "sass-loader",
                    options: {
                        implementation: require("sass"),
                    },
                },
                {
                    loader: "postcss-loader",
                    options: {
                        ident: "postcss",
                        plugins: [tailwindcss, autoprefixer],
                    },
                },
            ],
            include: path.resolve(__dirname, "../"),
        });
        return config;
    },
};

module.exports = {
    plugins: {
        tailwindcss: {},
        "postcss-preset-env": {},
        autoprefixer: {},
    },
};