Nuxt 3.8.1中CSS生效异常问题求助

安全阿岳

2026-7-5

Nuxt 3.8.1 + Sass 初始加载CSS失效问题排查与解决

问题现象

使用Nuxt 3.8.1搭配Sass开发时，页面初始加载或刷新后CSS完全不生效，但修改<style>标签（比如添加/移除scoped属性）后样式能正常应用。

代码问题排查与修复

先看你提供的代码，首先发现一个关键错误：Vue模板里用了className属性，这是React的写法，Vue中应该用class来绑定类名。这个错误会导致初始加载时样式选择器无法匹配到元素，虽然热重载修改<style>后可能因为缓存机制临时生效，但这是核心问题之一。

修正模板类名属性

把所有className替换为class，修正后的模板代码：

<template>
  <div class="indexMain">
    <div class="headings">
        <h1 class="first-h1">Майсторство</h1>
        <h3>без компромиси</h3>
        <h1 class="second-h1">Усилия </h1>
        <h3>без граници</h3>
    </div>
  </div>
</template>

其他可能的原因与解决方案

Nuxt缓存问题
Nuxt 3.8.1版本可能存在Sass编译缓存的bug，导致初始加载时样式未被正确注入。可以通过清理缓存解决：

rm -rf .nuxt node_modules/.cache
npm install
npm run dev

@font-face路径错误
<style>中使用~/public路径可能存在解析问题，Nuxt中public目录下的资源直接用根路径/即可，修正后的@font-face代码：

@font-face {
  font-family: 'Basil Regular';
  src: url('/Basil-Regular.ttf') format('truetype'),
       url('/Basil-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

预处理器配置问题
如果上述方法无效，可以在nuxt.config.ts中明确配置Sass预处理器，确保编译流程正常：

export default defineNuxtConfig({
  css: ['~/assets/css/main.scss'],
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          // 如有全局变量可在此引入，无则可省略
          additionalData: '@use "~/assets/css/variables.scss" as *;'
        }
      }
    }
  }
})