Laravel mix + TailwindCSS 运行 npm run watch 无限重新编译 CSS 作者: Chuwen 时间: 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 判断是否为生产环境 作者: Chuwen 时间: 2021-12-22 分类: Laravel 评论 有这么个需求，需要在一些静态文件带上 hash 参数，解决 CDN 缓存问题，但是在网上找的用这个 `mix.config.production` 是会报错的 然后自己打印 `mix` 发现了一个 `inProduction()` 方法，验证了下，这个确实是判断是否为生产环境的 #### 修改项目根目录下 webpack.mix.js ```js const mix = require('laravel-mix'); mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ require("tailwindcss"), ]); if (mix.inProduction()) mix.version(); ``` #### 然后看 /public/mix-manifest.json 会发现内容是这样的 ```json { "/js/app.js": "/js/app.js?id=33663d66c33666962f26", "/css/app.css": "/css/app.css?id=7066f8a66603866e666" } ``` #### 只要你保证在你的 blade 模版里面使用如 `mix('js/app.js')` 这样引用的就没有问题 ```blade <!doctype html> <html lang="{{ config('app.locale') ?? 'en' }}"> <head> <title>@yield('title')</title> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <link href="{{ mix('css/app.css') }}" rel="stylesheet"> <meta name="description" content="@yield('description')" /> <meta name="keywords" content="@yield('keywords', 'ParcelPanel')" /> </head> <body> <div> @yield('content') </div> <script src="{{ mix('js/app.js') }}"></script> </body> </html> ``` #### 最终生成的代码是类似 `<script src="/js/app.js?id=33663d66c33666962f26"></script>` 这样的