VueJs 应用程序部署正常，但组件样式不行

Question

我尝试使用 ftp 在 OVH 上部署我的 Laravel/VueJs 应用程序。我已经为其他项目做到了这一点，没有错误。但对于最后一个我有一个问题。 dom 正在显示并且 css 可以工作，但组件的样式不起作用。我的意思是，全局 css（对于

h1

、

h2

...）可以完美地作为 tailwind css 的导入（我的 tailwind 类按照我想要的方式显示）。但是我的组件的

<style>

锚点中的所有样式都没有被考虑，我的网站看起来就像我所做的第一个“hello world”。当我在控制台等开发工具中运行“npm run build”时，我没有出现错误。

我没有找到任何解决方案，我不明白发生了什么，如果有人已经遇到这个问题并且知道如何解决它，请帮助我。

我用我的 vite.config 尝试了很多东西，但它仍然没有按我想要的方式显示。

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

const require = createRequire(import.meta.url);
const sass = require('sass');

export default defineConfig({
    plugins: [
      laravel({
          input: ['resources/css/app.scss', 'resources/js/app.js'],
          refresh: true,
      }),
      vue(),
    ],
    resolve: {
      alias: {
          vue: 'vue/dist/vue.esm-bundler.js',
          '@': '/resources/js',
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          implementation: sass,
          additionalData: `@import "@/../css/_variables.scss";`,
        },
      },
    },
    build: {
      outDir: 'public/build',
      rollupOptions: {
          output: {
              entryFileNames: 'assets/[name].[hash].js',
              chunkFileNames: 'assets/[name].[hash].js',
              assetFileNames: 'assets/[name].[hash].[ext]',
          },
      },
    },
});

Answer 1

休息几天后我找到了解决方案。我只需调用 app.blade.php 中的所有样式表即可，它会调用 manifest.json 中引用的所有样式表。这是我的 app.blade 风格锚点：

@if (app()->environment('production')) @php $manifest = json_decode(file_get_contents(public_path('build/manifest.json')), true); @endphp <script src="{{ asset('build/' . $manifest['resources/js/app.js']['file']) }}" defer></script> @foreach ($manifest['resources/js/app.js']['css'] as $cssFile) <link rel="stylesheet" href="{{ asset('build/' . $cssFile) }}"> @endforeach @else @vite(['resources/js/app.js', 'resources/css/app.scss']) @endif