Angular 15+Tailwind+SASS：修改保存后资源路径解析失败

执行ng serve启动项目后，页面和资源加载正常，但修改代码触发热更新时编译失败，报错如下：

./src/styles.sass - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
D:\Congressa\ceteval\src\styles.sass:4:0: Can't resolve '../../assets/img/gallery/landing.jpg' in 'D:\Congressa\ceteval\src'

相关文件内容 #

src/styles.sass #

/* You can add global styles to this file, and also import other style files */
@tailwind base
@tailwind components
@tailwind utilities

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
    "./node_modules/flowbite/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')
  ],
}

补充信息 #

• 仅重启ng serve可恢复正常
• 同一文件中以下方式引用的资源无报错：

<div class="h-screen bg-[url('../../assets/img/gallery/landing.jpg')]">
<img class="w-24 h-24 md:w-48 md:h-auto md:rounded-xl object-cover rounded-full mx-auto" src="../../assets/img/gallery/juango.png" alt="" width="384" height="512">

解决方案 #

1. 改用绝对路径引用资源

将HTML中Tailwind自定义背景图的相对路径改为基于项目根目录（src）的绝对路径：

<div class="h-screen bg-[url('assets/img/gallery/landing.jpg')]">

Angular构建工具会自动识别assets目录下的资源，热更新时postcss-loader能正确解析路径。

2. 添加resolve-url-loader处理路径（可选）

如果自定义了PostCSS配置，通过以下步骤处理相对路径解析：

1. 安装依赖：

npm install resolve-url-loader --save-dev

2. 修改postcss.config.js：

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'resolve-url-loader': {
      sourceMap: true
    }
  }
};

3. 确认Tailwind内容扫描范围

确保tailwind.config.js的content数组包含所有使用了该背景图的文件，避免热更新时Tailwind重新生成样式遗漏路径规则。

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