Laravel Mix结合Tailwind CSS v4时mix watch无法监测SCSS文件变更

当使用Laravel Mix执行mix watch命令时，若项目通过@forward "tailwindcss"引入TailwindCSS，被@forward导入的SCSS文件（如test.scss）发生变更时，不会触发自动重建。但移除@forward "tailwindcss";语句后，test.scss的变更可正常触发重建流程。

相关代码与配置 #

app.scss #

@forward "tailwindcss";
@forward 'test.scss';
    
body {
  // background-color: black; // 修改此处可触发重建
}

test.scss #

body {
  background-color: black; // 修改此处无法触发重建
}

webpack.mix.js #

const mix = require('laravel-mix');
const path = require('path');

mix.setPublicPath(path.resolve( "./" ))

mix.options({
  postCss: [
    require('@tailwindcss/postcss'),
    require('autoprefixer'),
  ],
})
  .sass('assets/styles/app.scss', 'assets/build')
  .js("assets/scripts/app.js", "assets/build")

package.json #

{
  "scripts": {
    "dev": "npm run json-to-scss && mix",
    "watch": "npm run json-to-scss && mix watch",
    "prod": "npm run json-to-scss && mix --production",
    "json-to-scss": "json-to-scss ./data.json ./assets/styles/core/data.scss"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.20",
    "browser-sync": "^3.0.3",
    "browser-sync-webpack-plugin": "^2.3.0",
    "laravel-mix": "^6.0.49",
    "postcss": "^8.5.1",
    "resolve-url-loader": "^5.0.0",
    "sass": "^1.83.4",
    "sass-loader": "^12.6.0",
    "tailwindcss": "^4.0.0"
  },
  "dependencies": {
    "@tailwindcss/postcss": "^4.0.0",
    "gsap": "^3.12.7",
    "headroom.js": "^0.12.0",
    "json-to-scss": "^1.6.2",
    "lenis": "^1.1.20",
    "uniqid": "^5.4.0"
  }
}

解决方案 #

该问题源于TailwindCSS v4的PostCSS插件处理流程干扰了Laravel Mix对SCSS依赖文件的自动监听，可通过以下方式解决：

方法1：改用@import引入TailwindCSS #

修改app.scss中的引入方式，用@import替代@forward，确保SCSS编译阶段能正确追踪依赖文件：

@import "tailwindcss";
@forward 'test.scss';
    
body {
  // background-color: black;
}

方法2：手动指定监听文件 #

在webpack.mix.js中添加mix.watch()，强制监听目标SCSS文件：

const mix = require('laravel-mix');
const path = require('path');

mix.setPublicPath(path.resolve( "./" ))

mix.options({
  postCss: [
    require('@tailwindcss/postcss'),
    require('autoprefixer'),
  ],
})
  .sass('assets/styles/app.scss', 'assets/build')
  .js("assets/scripts/app.js", "assets/build")
  // 手动添加监听规则，覆盖自动监听的缺失
  .watch('assets/styles/**/*.scss', 'assets/styles/app.scss');

方法3：降级到TailwindCSS v3.x #

若上述方法不适用，可降级到TailwindCSS v3版本，其适配性更贴合Laravel Mix v6的工作流：

1. 修改package.json中的依赖版本：

"devDependencies": {
  // ...
  "tailwindcss": "^3.4.1"
},
"dependencies": {
  // 移除@tailwindcss/postcss依赖
  // ...
}

2. 调整webpack.mix.js的PostCSS配置：

mix.options({
  postCss: [
    require('tailwindcss'),
    require('autoprefixer'),
  ],
})

3. 执行npm install完成版本切换。

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