在 Docker 容器中使用 Laravel Mix 构建完整的 Tailwind 3 app.css 文件

Posted 2023-03-06

【中文标题】在 Docker 容器中使用 Laravel Mix 构建完整的 Tailwind 3 app.css 文件

【英文标题】：Build the complete Tailwind 3 app.css file using Laravel Mix in Docker container

【发布时间】：2022-01-16 11:41:26

【问题描述】：

我在 Docker 容器中设置了 Laravel，并使用 Laravel Sail 启动了它。我正在使用 Laravel mix 和 tailwind 版本 3 来包含我的 CSS。问题是我希望将整个 Tailwind CSS 编译到我的 resources/css/app.css 文件中。

tailwind.config.js

module.exports = 
  content: [
    "./resources/**/*.blade.php",
    "./resources/**/*.js",
    "./resources/**/*.vue",
  ],
  theme: 
    extend: ,
  ,
  plugins: [],

webpack.mix.js

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

mix.options(
    legacyNodePolyfills: false
);

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        require("tailwindcss"),
    ]);

我通常从 docker 容器中的应用程序目录运行 ./vendor/bin/sail npm run watch 来编译 resources/css/app.css. 不过，编译过程需要一段时间，watch 命令似乎没有捕获任何更改并自动重新编译。我猜这是因为我的开发环境欠佳（英特尔酷睿 i3 和 4 GB 内存）。

似乎只有 tailwind.config.js 内的 content 键中的文件中包含的 Tailwind CSS 类被编译为 resources/css/app.css，因为每次我对刀片模板进行更改以查看更改时，我都必须重新运行 ./vendor/bin/sail npm run watch在我的浏览器上，这很麻烦。另外，我无法使用我的网络浏览器 (Google Chrome) 检查 CSS 并动态更改以查看浏览器上的效果。

我已经尝试删除tailwind.config.js 的content 键中的所有文件，即content: [],，但生成的resources/css/app.css 几乎是空的；导致我的刀片模板中的顺风 CSS 不起作用。

有没有办法修改tailwind.config.js 或webpack.mix.js，这样我就可以简单地运行一次./vendor/bin/sail npm run dev，它会将整个Tailwind CSS 编译成resources/css/app.css？我不想在我的 html 标头中包含顺风 CSS 链接。

【参考方案1】：

我通常从 docker 容器中的应用程序目录运行 ./vendor/bin/sail npm run watch 来编译资源/css/app.css。尽管如此，编译过程需要一段时间，并且 watch 命令似乎没有捕获任何更改并自动重新编译。我猜这是因为我的开发环境欠佳（英特尔酷睿 i3 和 4 GB 内存）。

不，这不是我的“次优”开发环境。

根据Laravel Mix documentation：

Webpack 可能无法在某些本地开发环境中检测到您的文件更改。

相同的文档建议您运行

npm run watch-poll

相反，它解决了每次更改刀片模板时都必须运行 npm run dev 或 npm run watch 的问题。

但是，每次更改刀片模板时，我仍然需要刷新浏览器。 Laravel 文档建议您使用 Laravel Mix 的 browserSync() 方法，如 here 所示。但它不适用于我的情况，因为我在无头环境（即 Docker 容器）中工作。 browserSync() 方法允许您在更改刀片模板文件时观察浏览器中的更改，而无需刷新浏览器。

不过，生成完整的 Tailwind css 文件以便我可以检查浏览器上的元素并直接在浏览器上进行更改（例如通过 Chrome 中的开发人员选项卡）的主要问题尚未解决；现在，每次我想查看对模板文件所做的更改时，我只剩下刷新浏览器的痛苦。所以，我的问题部分解决了。