does anyone know how i would use vue3-sfc-loader, which lets me use vue without build tools, while still being able to use scss styling?
The following example is taken from here:
Index.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>
I want to use this for a small project. Thank you very much in advance!
since vue3-sfc-loader v0.9.4, asynchronous style processor is available. See the following sass example: https://github.com/FranckFreiburger/vue3-sfc-loader/discussions/181