Skip to content

Instantly share code, notes, and snippets.

@haydenbbickerton

haydenbbickerton/ur-legacy-styles.vue

Created July 13, 2021 16:05
Show Gist options
  • Save haydenbbickerton/21ed306de8bfded6d09b0e1a5709cb99 to your computer and use it in GitHub Desktop.
Save haydenbbickerton/21ed306de8bfded6d09b0e1a5709cb99 to your computer and use it in GitHub Desktop.
Download ZIP
Legacy Styles
Raw
ur-legacy-styles.vue
<template>
<div class="ur-legacy-styles">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'ur-legacy-styles',
};
</script>
<style scoped lang="scss">
.ur-legacy-styles /deep/ {
@import "./legacy-styles.scss";
}
</style>
@haydenbbickerton
Copy link
Author

If paired with a custom element solution like vuidget, you could conceivably have something like:

<body>
    <bootstrap-3-styles>
      <div class="container">
        ...
      </div>
    </bootstrap-3-styles>

    <bootstrap-4-styles>
      <div class="grid">
        ...
      </div>
    </bootstrap-4-styles>

    <zurb-foundation-styles>
      <button class="button">
        ...
      </div>
    </zurb-foundation-styles>
</body>

with a single, async and lazy loadable script tag per style-set, making them compatible with all browsers/platforms back to IE8.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment