Vite 3.0.9搭配Laravel 9.26.1时SCSS含~导入编译报错求助

核心原因 #

Vite不兼容Webpack的~别名规则（Webpack中~指向node_modules），而AdminLTE内部大量使用该写法，导致编译时无法找到依赖文件。

解决方案（无需转回Laravel Mix） #

方案1：配置Vite别名与Sass路径（推荐）

在vite.config.js中添加别名映射与Sass路径配置，让~指向node_modules：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/scss/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '~': '/node_modules',
        },
    },
    css: {
        preprocessorOptions: {
            scss: {
                includePaths: ['node_modules'],
            },
        },
    },
});

配置后，Sass会自动识别~开头的导入路径，直接从node_modules查找依赖。

方案2：给AdminLTE打补丁（临时方案）

如果方案1无效，可使用patch-package修改AdminLTE内部的导入路径：

1. 安装补丁工具：

npm install patch-package --save-dev

2. 找到node_modules/admin-lte中所有含~的SCSS导入，替换为相对路径（例如@import "~bootstrap/scss/functions"改为@import "../../bootstrap/scss/functions"，路径根据实际层级调整）。
3. 生成补丁：

npx patch-package admin-lte

后续更新AdminLTE后需重新生成补丁，适合临时应急。

方案3：切换sass-embedded优化编译

部分情况下，sass版本可能导致路径识别问题，可替换为sass-embedded：

npm uninstall sass
npm install sass-embedded --save-dev

配合方案1的Vite配置使用，可同时提升编译速度。

内容的提问来源于stack exchange，提问作者m33bo