laravel mix 6+ 默认仅在 production 模式下通过 minicssextractplugin 提取 css 到独立文件；开发时内联是设计行为，非 bug；启用 extractstyles: true 可全局启用提取，多入口自动对应多 css 文件。
要在 Mix 中把 CSS 提取到单独的 .css 文件（而非内联在 JS 中），必须禁用默认的 style-loader 行为，并启用基于 MiniCssExtractPlugin 的提取逻辑；Mix 6+ 已完全移除 extract-text-webpack-plugin 支持，强行使用会构建失败。
确认 Mix 版本并检查默认行为
运行 npm list laravel-mix 或查看 package.json 中的版本号。若为 v6.0.0 及以上，【默认已启用 MiniCssExtractPlugin，但仅对 production 模式生效】；开发时仍走 style-loader 内联，这是故意设计，不是 bug。
执行 npm run dev 后检查生成的 public/css/app.css 是否存在——若不存在，说明尚未触发提取条件。
强制在 dev 环境也提取 CSS
在 webpack.mix.js 开头添加：
const mix = require('laravel-mix');
mix.webpackConfig({ plugins: [ new mix.webpackConfig.plugins.MiniCssExtractPlugin({ filename: 'css/[name].css', chunkFilename: 'css/[name].css' }) ]});
接着替换默认 loader：调用 mix.options({ extractVueStyles: true })（针对 Vue 单文件组件）或直接重写 rule：
mix.webpackConfig({ module: { rules: [{ test: /\.css$/, use: [mix.webpackConfig.plugins.MiniCssExtractPlugin.loader, 'css-loader'] }] }});
⚠️ 注意：这一步必须放在 mix.js() 和 mix.css() 调用之前，否则配置会被覆盖。
启用 extractStyles 配置项（Mix 6.0+ 原生支持）
第一步：在 webpack.mix.js 中设置 mix.options({ extractStyles: true })。
第二步：确保你没有手动调用 mix.sass() 或 mix.less() 时传入 extract: false —— 这个参数会覆盖全局配置。
第三步：运行 npm run prod。此时 public/css/app.css 将被生成，且 HTML 中不再注入 <style></style> 标签。
第四步：若使用了多个 CSS 入口（如 mix.css('resources/css/one.css', 'public/css/one.css') 和 mix.css('resources/css/two.css', 'public/css/two.css')），【extractStyles: true 会为每个入口生成独立 CSS 文件，无需额外配置】。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
