Laravel mix + TailwindCSS 运行 npm run watch 无限重新编译 CSS 作者: Shine 时间: 2022-05-21 分类: JavaScript 先说答案，参考的是：https://github.com/laravel-mix/laravel-mix/issues/1942 ## 序言 最近在筹划着本博客新主题设计，想运用现代化前端技术，再加之对 Laravel mix 有一定的使用经验，所以选择了 Laravel mix 作为脚手架 ## 问题 `webpack.mix.js` 配置： ```js const mix = require('laravel-mix'); require('mix-tailwindcss'); mix.disableSuccessNotifications() .ts('src/app.ts', 'theme/assets') .setPublicPath('theme/assets') .sass("src/assets/sass/app.scss", "theme/assets") .tailwind('./tailwind.config.js') .webpackConfig({ module: { rules: [ { test: /\.tsx?$/, loader: "ts-loader", exclude: /node_modules/ } ] } }) mix.browserSync({ proxy: '127.0.0.1:3792', files: ["theme/**/*.php", "src/*.js", "src/*.css"], open: false }) ``` `tailwind.config.js` 配置： ```js module.exports = { content: require('fast-glob').sync([ './src/**/*.{html,js,ts}', './node_modules/tw-elements/dist/js/**/*.js', './theme/**/*.php' ]), theme: { extend: {}, }, plugins: [ require('tw-elements/dist/plugin') ], } ``` 使用上述的配置，然后运行 `npm run watch`，就看到终端一直闪烁着编译结果，然后电脑风扇呼呼狂啸：  ## 解决方案 还好我用 Google + 英文搜索（用的蹩脚英文 ?），然后找到了这个 **issues**： https://github.com/laravel-mix/laravel-mix/issues/1942 翻啊翻，发现这个人给出的解决方案是可行的：https://github.com/laravel-mix/laravel-mix/issues/1942#issuecomment-998148038 1. 首先安装 `glob` - npm：`npm install fast-glob -D` - yarn：`yarn add fast-glob -D` 2. 然后将 `tailwind.config.js` 改为： ```js module.exports = { // 看这里 content: require('fast-glob').sync([ './src/**/*.{html,js,ts}', './node_modules/tw-elements/dist/js/**/*.js', './theme/**/*.php' ]), theme: { extend: {}, }, plugins: [], } ``` 然后就完美解决了 标签: Laravel Mix, TailwindCSS