scss不加载Nuxt.JS文件

SCSS是一种CSS预处理器，它扩展了CSS的功能，使得样式表的编写更加灵活和高效。Nuxt.js是一个基于Vue.js的通用应用框架，它提供了一些默认配置和约定，使得Vue.js应用的开发更加简单和快速。

在Nuxt.js中，可以使用SCSS来编写样式。要在Nuxt.js中加载SCSS文件，需要进行以下步骤：

1. 安装依赖：首先，需要确保项目中已经安装了node-sass和sass-loader这两个依赖。可以使用npm或者yarn进行安装。
2. 配置Nuxt.js：在Nuxt.js的配置文件（nuxt.config.js）中，需要添加一个build配置项，指定要加载的SCSS文件。可以使用css属性来指定要加载的CSS文件，使用styleResources属性来指定要加载的SCSS文件。例如：

module.exports = {
  // ...
  build: {
    // ...
    extend(config, { isDev, isClient }) {
      // ...
      config.module.rules.push({
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      })
    }
  },
  // ...
  styleResources: {
    scss: [
      '@/assets/styles/main.scss'
    ]
  },
  // ...
}

上述配置中，我们使用了vue-style-loader、css-loader和sass-loader来处理SCSS文件。styleResources属性指定了要加载的SCSS文件的路径。

1. 创建SCSS文件：在指定的路径下创建一个SCSS文件，例如@/assets/styles/main.scss。在该文件中，可以编写所需的样式。
2. 使用样式：在Vue组件中，可以通过引入SCSS文件来使用样式。例如，在一个.vue文件中：

<template>
  <div class="my-component">
    <!-- ... -->
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/styles/main.scss";

.my-component {
  // 使用样式
  color: $primary-color;
}
</style>

在上述代码中，我们使用@import指令引入了之前创建的SCSS文件，并在样式中使用了其中定义的变量。

总结： SCSS是一种CSS预处理器，可以扩展CSS的功能。在Nuxt.js中加载SCSS文件需要安装依赖、配置Nuxt.js、创建SCSS文件，并在Vue组件中使用样式。具体的配置和使用方法可以参考腾讯云的Nuxt.js文档：Nuxt.js文档。