如何让Storybook识别SCSS Mixins？配置问题求助

问题背景 #

项目中Node.tsx和Node.stories.tsx代码一致，引入PCSS模块并使用其中的.propsIcon类：

import IconSvg from 'ui/Icon/IconSvg'
import stylesNode from './Node.module.pcss'

// 省略其他逻辑
return (
  <IconSvg
    className={stylesNode.propsIcon}
    onClick={onTextConfirm}
  />
)

项目运行时样式正常，但Storybook中仅当.propsIcon类直接定义时生效，通过Sass @mixin包裹的样式无法被识别：

@mixin external {
  .propsIcon {
    margin: 0 -5px 0 15px;
    border: 1px solid #0f0;
  }
}
// 仅单独定义时Storybook生效
.propsIcon {
  margin: 0 -5px 0 15px;
  border: 1px solid #f00;
}

已确认Storybook可正常识别sass、scss、pcss文件，但@mixin定义的样式例外，相关webpack配置如下：

相关配置（.storybook/webpack.config.ts） #

import MiniCssExtractPlugin from 'mini-css-extract-plugin';
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent')

export function buildCssLoader(isDev: boolean) {
    return {
        test: /\.(sacss|pcss|scss)$/i,
        use: [
            isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                  modules: {
                      mode: 'local',
                      getLocalIdent: getCSSModuleLocalIdent,
                  },
              },
            },
            'postcss-loader',
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
              },
            },
        ],
    };
}

问题原因分析 #

1. @mixin未被调用：Sass的@mixin仅为样式片段定义，必须通过@include指令调用才会被编译到最终CSS中。项目环境可能在全局或其他文件中调用了该mixin，但Storybook构建流程未包含这段调用逻辑，导致mixin内的样式未被输出。
2. Loader执行顺序错误：当前配置中postcss-loader在sass-loader之前执行，而@mixin是Sass专属语法，需要先由sass-loader编译为标准CSS后，再交给postcss-loader处理。顺序颠倒会导致postcss-loader无法识别@mixin语法，直接忽略相关样式。
3. 全局样式引入缺失：若项目全局样式文件中包含该mixin的调用逻辑，但Storybook未正确加载全局样式，也会导致mixin内的类未被编译生成。

解决方案 #

1. 在PCSS文件中调用@mixin：在Node.module.pcss中添加@include external();，确保mixin内的样式被编译输出。
2. 调整Loader执行顺序：将sass-loader移至postcss-loader之前，保证Sass语法先被编译：

use: [
    isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
          modules: {
              mode: 'local',
              getLocalIdent: getCSSModuleLocalIdent,
          },
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
      },
    },
    'postcss-loader',
],

3. 确保Storybook加载全局样式：在.storybook/preview.ts中引入项目全局样式文件，例如：

import '../src/styles/global.pcss';

内容的提问来源于stack exchange，提问作者Ruslan Karimov