LIB overrides PROJECT scss variables

[ricardo17coelho]

Hi @mitevpi 🙃

I guess, i found an issue when using this A M A Z I N G component LIB.

For some reason when import an component like:

import { HelloWorld } from "component-library";

The PROJECT scss variables (placed on: /scss/variables.scss)

• Which will be automatic loaded by vuetify-loader see: https://v2.vuetifyjs.com/en/features/sass-variables/#vue-cli-install will be overrited.

How u can check this ?

Create an new vue-cli project:

1. vue create vue-vuetify
2. vue add vuetify
3. Install the LIB locally:
4. run yarn add file:./../vuetify-component-lib-template/component-library-v1.4.0.tgz ( or where u installed the LIB)
5. add /scss/variables.scss

// scss/variables.scss

$font-size-root: 40px;
$font-family: Raleway, Helvetica, sans-serif;
$body-font-family: $font-family !important;
$heading-font-family: $font-family;

@import '~vuetify/src/styles/styles.sass';

6. Go to App.vue and replace the content with:

// App.vue

<template>
  <v-app>
    <v-app-bar app color="primary" dark>
      <div class="d-flex align-center">
        <v-img
          alt="Vuetify Logo"
          class="shrink mr-2"
          contain
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
          transition="scale-transition"
          width="40"
        />

        <v-img
          alt="Vuetify Name"
          class="shrink mt-1 hidden-sm-and-down"
          contain
          min-width="100"
          src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
          width="100"
        />
      </div>

      <v-spacer></v-spacer>

      <v-btn
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
        text
      >
        <span class="mr-2">Latest Release</span>
        <v-icon>mdi-open-in-new</v-icon>
      </v-btn>
    </v-app-bar>

    <v-main>
      <HelloWorld />
      <v-container>
        <h1>BlahBlah H1</h1>
        <h2>BlahBlah H2</h2>
        <h3>BlahBlah H3</h3>
        <h4>BlahBlah H4</h4>
        <h5>BlahBlah H5</h5>
        <h6>BlahBlah H6</h6>
      </v-container>
      <v-container>
        <div class="text-h1">text-h1</div>
        <div class="text-h2">text-h2</div>
        <div class="text-h3">text-h3</div>
        <div class="text-h4">text-h4</div>
        <div class="text-h5">text-h5</div>
        <div class="text-h6">text-h6</div>
        <div class="text-subtitle-1">text-subtitle-1</div>
        <div class="text-subtitle-2">text-subtitle-2</div>
        <div class="text-body-1">text-body-1</div>
        <div class="text-body-2">text-body-2</div>
        <div class="text-button">text-button</div>
        <div class="text-caption">text-caption</div>
        <div class="text-overline">text-overline</div>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>
// import HelloWorld from "./components/HelloWorld";
import { HelloWorld } from "component-library";

export default {
  name: "App",

  components: {
    HelloWorld,
  },

  data: () => ({
    //
  }),
};
</script>

7. open the app into the browser (localhost:8080)
8. comment the HelloWorld usage and see the difference

[mitevpi]

Hi there - unfortunately I have not been able to maintain this project in quite some time, and therefore I'm not able to provide support. I sincerely apologise for not being able to be any more helpful :(

[ricardo17coelho]

Hi @mitevpi I found an solution (or maybe an workaround).

1. Move vue and vuetity to perDependencies (package.json) This a vue/vuetify LIB. I guess the purpose is to use it on vue/vuetify projects, so when u use it, this dependencies will be for sure installed in the parent project.

2. To fix this issue, i remove this line: https://github.com/mitevpi/vuetify-component-lib-template/blob/master/vue.config.js#L10 Otherwise the vuetify code will be compilled in the DIST built code, which causes this issue.

[ricardo17coelho]

Humm.. it seams not no fix the problem 🙈