升级Angular 17后sass-loader样式报错：theme颜色非有效颜色

问题重现 #

升级至Angular 17后出现样式构建错误，报错信息：

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
$color: theme("colors.primary.600") is not a color.

相关文件内容：
styles.scss：

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto&display=swap');
@import url('ag-grid-community/styles/agGridMaterialFont.css');

@import "tailwindcss/base";
@import "tailwindcss/utilities";
@import "tailwindcss/components";
@import "tp-theme/tp-theme";

tailwind.config.js：

module.exports = {
  content: ['./src/**/*.{html,ts}'],
  theme: {
    colors: {
      primary: {
        600: '#0086C9',
      },
    }
  }
}

该问题在Angular 16版本中未出现。

解决方案 #

1. 调整Tailwind导入顺序 #

Angular 17的构建链对样式导入顺序敏感度提升，theme()函数依赖tailwindcss/components中的工具类定义，需将其移至utilities之前导入：

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto&display=swap');
@import url('ag-grid-community/styles/agGridMaterialFont.css');

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "tp-theme/tp-theme";

2. 升级Tailwind至兼容版本 #

Angular 17要求使用Tailwind v3.3及以上版本，低版本可能导致theme()函数解析异常，执行以下命令升级：

npm install tailwindcss@latest postcss@latest autoprefixer@latest

3. 验证自定义主题的调用时机 #

确保tp-theme/tp-theme中的theme("colors.primary.600")调用在Tailwind核心样式导入之后，避免在Tailwind配置未加载完成前执行该函数。若tp-theme为内部自定义库，检查其内部是否存在提前调用theme()的情况。

4. 重置依赖环境 #

Angular 17升级可能导致sass-loader等依赖版本不兼容，尝试清理并重新安装依赖：

rm -rf node_modules package-lock.json
npm install

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