Laravel 9中npm run dev编译Vue和Tailwind时出错求助

DevOps 小满

2026-8-6

Laravel 9 安装Vue3+TailwindCSS编译错误：Can't resolve 'variables' 解决方案

这个错误的核心原因是你的resources/css或resources/sass目录下的编译文件中，存在对名为variables的文件的引用，但该文件路径不正确或不存在，导致webpack无法找到对应的资源。

解决步骤：

检查并修正@import语句
打开resources/css/app.css和resources/sass/app.scss，查找所有包含variables的@import语句：
- 若app.scss中引用Sass变量文件（比如_variables.scss），确保路径正确，示例：
```
// 正确写法（假设_variables.scss在同目录下）
@import './variables';
```
- 若app.css中错误引入了Sass变量文件，直接删除该行，因为PostCSS处理的纯CSS文件无法识别Sass变量。

调整Webpack Mix配置，避免编译冲突
你当前同时编译了CSS（PostCSS）和Sass，可能导致依赖混淆，可选择以下两种方案：
方案1：合并编译逻辑，优先处理Sass

// webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css', [
        require('tailwindcss'),
        require('autoprefixer')
    ]);

同时将app.css中的Tailwind指令移到app.scss中：

// resources/sass/app.scss
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
// 你的其他Sass代码和变量

方案2：保持分开编译，但确保无交叉依赖
确认app.css和app.scss之间没有互相引用的内容，调整编译顺序：

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