vue3-sfc-loader无法调用scss

Vue3-SFC-Loader是一个用于预加载和转换Vue 3组件单文件组件（SFC，Single File Component）的工具，它主要用于处理.js、.vue和.html等文件。然而，当涉及到样式表时，它默认可能不直接支持SCSS（Sass）语言，因为SFC规范本身并不内置对SCSS的支持。

如果你想要在Vue3项目中使用SCSS，你需要做以下几步：

1. 安装依赖：首先需要安装一个Node.js模块来转换SCSS，如`vue-cli-plugin-vue-scss`或`sass-resources-loader`，它们可以帮你将SCSS文件编译为CSS。

npm install vue-cli-plugin-vue-scss sass-resources-loader node-sass --save-dev

2. 配置webpack：在`.vue`配置文件（通常是`vue.config.js`）中，配置loader以处理SCSS。例如：

module.exports = {
  // ...
  chainWebpack: config => {
    config.module
      .rule('scss')
      .test(/\.s[ac]ss$/i) // 匹配.scss和.sass文件
      .use('sass-resources-loader') // 使用资源加载器处理SCSS
        .loader('sass-resources-loader')
        .options({
          resources: ['src/assets/scss/global.scss'] // 指定你的全局SCSS文件
        });
  }
};

3. 在`.vue`文件中引用SCSS：像平常一样使用`<style lang="scss">`标签引入SCSS文件。

<template>
  <!-- ... -->
</template>

<script>
import './styles.scss';
export default { /* ... */ };
</script>
<style lang="scss">
/* SCSS代码 */
</style>