Vite 未加载 VUE 组件内部的 CSS 代码

Question

我的应用程序是使用 Laravel 构建的，Inertia.js 是使用 Vue 构建的。我正在使用 Vite 来捆绑前端文件。

通常，应用程序运行良好，但是，当我将应用程序放入子目录中时，Vite 不会加载 .vue 文件或组件中的 CSS 代码。

结果，当我访问页面 URL example.com/subdirectory/login 时，它显示一个空白页面

浏览器控制台显示以下内容：

未捕获（承诺中）错误：无法为 /build/assets/Login.a0d488b1.css 预加载 CSS d http://example.com/subdirectory/build/assets/app.6486bb89.js:1

在本例中，我尝试访问登录页面/组件。但是，无法加载 Login.a0d488b1.css 文件，因为它在路径开头缺少 subdirectory 名称。

您能告诉我如何解决这个问题吗？

我的 vite.config.js 文件如下所示：

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/sass/app.scss',
               'resources/js/app.js',

               // website
               'resources/sass/website/theme.scss',
               'resources/js/website/main.js',

               
           ],
           refresh: [{
               //paths: ['resources/**'],
               paths: ['resources/js/**', 'resources/sass/**'],
               config: { delay: 300 }
           }],
       }),    
       
       vue({
           template: {
               transformAssetUrls: {
                   base: null,
                   includeAbsolute: false,
               },
           },
       }),
   ],
   resolve: {
       alias: {
           // '@': '/resources/js',
           'ziggy': path.resolve('vendor/tightenco/ziggy/dist'),
           'ziggy-vue' : path.resolve('vendor/tightenco/ziggy/src/js/vue'),            
       }
   }
});

Answer 1

我没有万无一失的答案。但是，我在网上找不到与此问题相关的任何内容。这是我的两分钱：

在我的例子中，我的一个 Vue 组件文件也有同样的错误，但是这个组件内部没有任何样式标签，但仍然有一个来自 vite 构建的关联编译 CSS 文件。

检查此文件后，我注意到其中有以下行

@import url("//hello.myfonts.net/count/3edd2b")

。这来自我在应用程序中全局级别使用的 SCSS 文件之一，并导入到 app.js 入口文件中。

我怀疑 vite 没有正确访问导入。如果检查该 URL，则会返回一个空响应，因此这也可能导致该问题。

总之，通过删除 SCSS 文件中的导入，CSS 资源最终编译并运行时没有错误。