如何将 vue3-sfc-loader 与 scss 一起使用

问题描述 投票:0回答:1

有谁知道我将如何使用 vue3-sfc-loader,它可以让我在没有构建工具的情况下使用 vue,同时仍然能够使用 scss 样式?

以下示例取自此处

索引.html

  <!DOCTYPE html>
  <html>

  <head>
      <script type="importmap">
      {
        "imports": {
          "vue": "https://jspm.dev/vue/dist/vue.js"
        }
      }
      </script>
  </head>

  <body style=margin:0>
      <div id="container"></div>

      <script type="module">
      import Vue from 'vue';

      container.innerHTML = '<p>{{ message }}</p>';

      new Vue({
        el: '#container',
        data() {
          return {
            message: 'Hello Vue.js!'
          }
        }
      });

      </script>

  </body>
  </html>

myComponent.vue

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

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

  <style scoped>
    .example {
      color: v-bind('color');
    }
  </style>

我想用它来做一个小项目。提前非常感谢!

javascript html vue.js sass vue3-sfc-loader
1个回答
0
投票

从 vue3-sfc-loader v0.9.4 开始,异步样式处理器可用。 请参阅以下 sass 示例: https://github.com/FranckFreiburger/vue3-sfc-loader/discussions/181

© www.soinside.com 2019 - 2024. All rights reserved.