Laravel Vue3 Vite项目中Materio模板SCSS样式未加载求助

1. 检查Vite配置对SCSS的支持与别名设置 #

确保vite.config.js正确配置SCSS预处理器，且@core别名指向正确路径：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'resources/js'),
            '@core': path.resolve(__dirname, 'resources/js/@core'), // 确保别名指向SCSS所在目录
        },
    },
    css: {
        preprocessorOptions: {
            scss: {
                // 若模板有全局变量，可在此全局引入，示例：
                // additionalData: `@use "@core/scss/variables" as *;`
            },
        },
    },
});

2. 验证SCSS导入语法兼容性 #

resources/js/@core/scss/index.scss中@use可能存在Vite兼容性问题，临时替换为@import测试：

// 原@use写法
@use './variables' as *;
@use './mixins' as *;

// 替换为@import测试
@import './variables';
@import './mixins';

若替换后样式生效，可统一改为@import，或升级Vite及SCSS相关依赖包。

3. 确认主入口的样式引入逻辑 #

在resources/js/app.js中确保正确导入SCSS文件：

import './@core/scss/index.scss';
import './bootstrap';
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

同时检查resources/views/app.blade.php是否包含Vite生成的样式链接：

<head>
    {{-- 其他头部内容 --}}
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

4. 清理缓存并重新构建资源 #

执行命令清理缓存、重装依赖并重新编译：

npm run clean
npm install
npm run dev

生产环境可执行：

npm run build
php artisan optimize:clear

5. 检查文件路径与权限 #

确认resources/js/@core/scss下的SCSS文件存在，且路径大小写与导入语句一致（Linux环境大小写敏感），同时文件权限正常可读。

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