search

FredKSchott / create-snowpack-app

The all-in-one app template for Snowpack. [moved]
https://www.snowpack.dev
Other
727 stars 96 forks source link

Support css modules in vue style tags #111

Open hitautodestruct opened 4 years ago

hitautodestruct commented 4 years ago

In snowpack it is not clear how to enable css modules for .vue files using the module attribute.

Usage example:

<template>
  <div :class="$style.App"></div>
</template>

<style lang="scss" module>
.App {
  text-align: center;
}
</style>

Using the above with snowpack the app throws an error in the browser:

TypeError: Cannot read property 'App' of undefined
    at Proxy.render (App.js?mtime=1591252156733:15)
    at renderComponentRoot (vue.js:1362)
    at componentEffect (vue.js:4140)
    at reactiveEffect (vue.js:297)
    at effect (vue.js:272)
    at setupRenderEffect (vue.js:4132)
    at mountComponent (vue.js:4091)
    at processComponent (vue.js:4048)
    at patch (vue.js:3711)
    at render (vue.js:4810)

Vue-loader for webpack allows this behaviour see docs.

hitautodestruct commented 4 years ago

Or point me in the direction to how to add this myself. Is it at the plugin level? Is it a vue issue?

hitautodestruct commented 4 years ago

Anyone? @FredKSchott

FredKSchott commented 4 years ago

It appears to be a limitation of our Vue plugin. I'm not familiar enough with the Vue compiler to add but I'd love to review if anyone can submit a PR.

Logic is here: https://github.com/pikapkg/create-snowpack-app/blob/master/packages/plugin-vue/plugin.js

vue compiler plugin is here: https://www.npmjs.com/package/@vue/compiler-sfc