Laravel混合清除CSS

在Laravel项目中使用混合技术可以大幅度提高前端开发效率，但是混合在前端开发中使用不当会带来一些不方便的问题。其中一个问题就是清除旧版本的css缓存，而不是在新版本的css生效时。本文将介绍如何使用Laravel Mix清除旧版本的css缓存。

使用版本

本文所使用的版本信息如下：

• Laravel: 7.0
• Laravel Mix: 5.0

需求

我们想要在每次修改css代码后自动清除旧版本的css缓存。使用Laravel Mix提供的 version() 方法可以轻松地实现这一功能。

步骤

步骤1： 安装Laravel Mix

在命令行中执行以下命令安装Laravel Mix：

npm install laravel-mix --save-dev

步骤2： 编辑webpack.mix.js文件

在项目根目录中找到webpack.mix.js文件，添加下面的代码：

mix.js('resources/js/app.js', 'public/js')
   .postCss('resources/css/app.css', 'public/css')
   .version();

在上面的例子中，我们在mix()链中添加了 version() 方法。

步骤3： 运行Laravel Mix

在命令行中执行以下命令运行Laravel Mix：

npx mix

结论

现在，每次我们修改了css代码后，运行 npx mix 命令将会生成新的混合文件，并自动清除旧版本css缓存。我们只需要在HTML代码中引用新的混合文件，就可以享受到Laravel Mix的优势。