如何结合vue3-sfc-loader在无构建工具Vue项目中使用SCSS？

vue3-sfc-loader支持通过配置预处理器来使用SCSS，只需要引入sass编译器并在loader选项中配置即可，以下是具体实现步骤：

1. 调整HTML中的依赖配置 #

更新index.html的importmap，添加vue3-sfc-loader和sass的CDN依赖，同时替换原有的Vue初始化逻辑为vue3-sfc-loader的加载逻辑：

<!DOCTYPE html>
<html>
<head>
    <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js",
        "vue3-sfc-loader": "https://unpkg.com/vue3-sfc-loader/dist/vue3-sfc-loader.esm.js",
        "sass": "https://unpkg.com/sass@1/dist/sass.esm.js"
      }
    }
    </script>
</head>
<body style="margin:0">
    <div id="app"></div>

    <script type="module">
    import { createApp } from 'vue';
    import { loadModule } from 'vue3-sfc-loader';
    import * as sass from 'sass';

    const options = {
      moduleCache: { vue: Vue },
      async getFile(url) {
        const res = await fetch(url);
        if (!res.ok) throw Object.assign(new Error(res.statusText + ' ' + url), { res });
        return {
          getContentData: asBinary => asBinary ? res.arrayBuffer() : res.text(),
        };
      },
      addStyle(textContent) {
        const style = Object.assign(document.createElement('style'), { textContent });
        document.head.appendChild(style);
      },
      // 配置SCSS预处理器
      preprocessLang: {
        scss: async (source, filename) => {
          const result = await sass.compileString(source);
          return result.css;
        }
      }
    };

    loadModule('./myComponent.vue', options)
      .then(component => {
        createApp(component.default).mount('#app');
      });
    </script>
</body>
</html>

2. 修改Vue组件的样式部分 #

在myComponent.vue中，给style标签添加lang="scss"属性，即可编写SCSS语法的样式：

<template>
  <span class="example">{{ msg }}</span>
</template>

<script>
export default {
  data () {
    return {
      msg: 'world!',
      color: 'blue',
    }
  }
}
</script>

<style scoped lang="scss">
$font-size: 1.5rem;
.example {
  color: v-bind('color');
  font-size: $font-size;
  // 可使用SCSS嵌套、变量等特性
  &:hover {
    opacity: 0.8;
  }
}
</style>

关键说明 #

• 确保sass版本与vue3-sfc-loader兼容，使用unpkg提供的最新稳定版即可
• preprocessLang配置项用于指定SCSS编译逻辑，借助sass的compileString方法将SCSS代码转为普通CSS
• getFile方法负责加载.vue文件，需保证组件文件路径与index.html的相对关系正确

内容的提问来源于stack exchange，提问作者Aeiddius