javascript - Import scss from node_modules globally in my Vue js application

Question

I am developing a Vue js (v2.6.11) application. I have some scss files which are installed using npm, I want to import them from my node_modules on a global level so that the styles are applied to every component.

I have an App component:

//File: src/App.vue

<template>
  <div id="app">
     <HistoryTable />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HistoryTable from './components/history-table/HistoryTable.vue';

@Component({
  components: { HistoryTable },
})
export default class App extends Vue {}
</script>

<!-- GLOBAL STYLES ------>
@import '~workbench-core/dist/scss/globals';
<!-- GLOBAL STYLES END -->

The styles which I have imported above work for App component, and are not applied to HistoryTable component. I want to import this somewhere globally so it is applied to all my components.

I have tried creating vue.config.js file with the following code, but it did not work for me

//File: src/vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `
                @import '~workbench-core/dist/scss/globals.scss';
                `,
      },
    },
  },
};

question from:https://stackoverflow.com/questions/65883788/import-scss-from-node-modules-globally-in-my-vue-js-application

Answer 1

Waitting for answers