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 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…