Angular 15+Storybook 7.6中SCSS里Tailwind @config指令失效求助

核心原因 #

@config 是Tailwind CSS v3.3+新增的指令，Angular默认的SCSS编译链没集成Tailwind的PostCSS解析逻辑，导致该指令被直接忽略；同时Storybook的webpack配置可能未正确加载PostCSS插件，无法识别这个新指令。

解决方案步骤 #

1. 确认Tailwind CSS版本 #

先检查你当前的Tailwind版本是否达标：

npm list tailwindcss

如果版本低于v3.3，执行升级：

npm install tailwindcss@latest --save-dev

2. 配置项目根目录的PostCSS #

在项目根目录新建postcss.config.js文件，内容如下：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

3. 修正@config的相对路径 #

@config的路径是相对于当前SCSS文件的，你需要对应调整。比如：

• 如果你的main.scss在storybook/assets/目录下，而tailwind.config.js在项目根目录，第一行应改为：

@config "../../tailwind.config.js";

4. 调整Storybook的Webpack配置 #

在.storybook/main.js中添加webpack配置，确保PostCSS loader被加入SCSS处理链：

module.exports = {
  stories: ['../**/*.stories.@(js|ts)'],
  addons: ['@storybook/addon-essentials'],
  framework: {
    name: '@storybook/angular',
    options: {}
  },
  webpackFinal: async (config) => {
    // 找到SCSS规则并添加PostCSS loader
    const scssRule = config.module.rules.find(rule => rule.test.test('.scss'));
    if (scssRule) {
      scssRule.use.push({
        loader: 'postcss-loader',
        options: {
          postcssOptions: require('../postcss.config.js'),
        },
      });
    }
    return config;
  }
};

5. 验证配置是否生效 #

在tailwind.config.js里加个自定义测试配置，比如：

module.exports = {
  theme: {
    extend: {
      colors: {
        test: '#ff0000',
      },
    },
  },
};

然后在任意Story组件中使用text-test类，查看文字是否变成红色，以此确认@config是否生效。

6. 重启Storybook服务 #

执行以下命令重启服务，让所有配置生效：

ng run storybook:storybook

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