Vue 3 + Storybook + SCSS + TailwindCSS 配置问题：组件样式无法正确加载，@apply指令未解析

你的核心问题是组件SCSS中的@apply指令没有被PostCSS正确解析，导致Tailwind样式无法生效。这主要是因为Webpack配置的规则顺序、覆盖范围有误，再加上路径配置的小问题。咱们一步步来修复：

1. 重构Webpack配置，整合PostCSS到SCSS处理流程 #

你原来的Webpack配置拆分了SCSS和PostCSS的处理规则，而且PostCSS规则只覆盖了storybook目录，没包含src里的组件样式。另外处理顺序非常关键：必须先让sass-loader把SCSS编译成CSS，再用postcss-loader解析Tailwind的@apply指令，最后才是css-loader和vue-style-loader注入样式。

替换.storybook/webpack.config.js的内容为：

const path = require('path');
module.exports = ({ config, mode }) => {
  // 统一处理SCSS文件，整合PostCSS解析逻辑
  config.module.rules.push({
    test: /\.scss$/,
    use: [
      require.resolve("vue-style-loader"),
      require.resolve("css-loader"),
      {
        loader: 'postcss-loader',
        options: {
          sourceMap: true,
          config: {
            path: './.storybook/',
          },
        },
      },
      {
        loader: require.resolve("sass-loader"),
        // 可选：配置Sass路径别名，简化组件中的@use引入
        options: {
          sassOptions: {
            includePaths: [path.resolve(__dirname, '../src/scss')],
          },
        },
      }
    ],
    // 确保覆盖src和storybook目录下的所有SCSS文件
    include: [path.resolve(__dirname, '../src'), path.resolve(__dirname, '../storybook')]
  });

  return config;
};

2. 修复组件中的SCSS路径引用 #

你的Fact.vue里用了@use "./src/scss/atoms/fact.scss";，这个相对路径如果Fact.vue在src/components/atoms/目录下，其实是可以正常跳转的，但用我们上面配置的includePaths可以简化成更直观的写法：

@use "atoms/fact";

这样既简洁，又不容易出现路径错误。

3. 确认Tailwind配置的Content范围 #

确保项目根目录的tailwind.config.js中，content数组包含所有需要扫描的文件，这样Tailwind的JIT模式才能生成对应的样式：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{vue,js,ts,jsx,tsx}", // 扫描src下所有组件与脚本文件
    "./storybook/**/*.{vue,js,ts,jsx,tsx}" // 扫描storybook的故事文件
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

4. 测试验证 #

做完以上修改后，一定要重启Storybook服务（热重载无法识别配置文件的变更），然后打开Fact组件的故事，检查开发者工具中.fact类是否包含font-bold和text-4xl对应的CSS属性。

为什么原来的配置不生效？ #

• PostCSS规则只覆盖了storybook目录，组件的SCSS文件在src里，根本没被PostCSS处理；
• 处理顺序错误：你先跑了PostCSS再执行Sass编译，此时SCSS还没转成CSS，PostCSS自然识别不了@apply指令；
• 路径引用的小问题可能导致SCSS文件没被正确加载。

内容的提问来源于stack exchange，提问作者Markus G.