CODEWITHSUNDEEP
webpackvue.jsvuejs2webpack-2webpack-4
Pascut
Pascut

Reputation: 3434

VueJs component node modules css/js not loaded

I'm using VueJs 2.5.*

I load the components using the following main.js:

import './assets/sass/paper-dashboard.scss'
import './assets/sass/element_variables.scss'
import './assets/sass/demo.scss'
...
import Test from './components/Test.vue'
...
Vue.component('vue-test', Test)
var vm = new Vue({
    el: '.vue-wrap',
    components: { Test },
})
window.vm = vm;

My page HTML:

<div class="vue-wrap"><vue-test></vue-test></div>

I'm using a custom template: https://demos.creative-tim.com/vue-paper-dashboard/

The problem is that the css/js from the used node modules is not loaded in my HTML. Only the component html from between the "template" tags is loaded. The component inline css is also not loaded.

How can I load the css/js from node modules in my page when I load the Component?

How should I edit the webpack config in order to make it load all css/js from node modules? Separate or combined in my app.css or app.js files.

EDIT

I found an ugly solution. If I import the .scss in my component, the css is loaded in my generated app.css. In my Test.vue I added:

import '../assets/sass/paper-dashboard.scss'
import '../assets/sass/element_variables.scss'
import '../assets/sass/demo.scss'

Is there an option that will automatically load all of these from my main.js file instead of loading them in each component that I use individually?

Upvotes: 1

Views: 1202

Answers (1)

hgiasac
hgiasac

Reputation: 2233

SCSS can import file same as JavaScript. So You can create 1 file index.scss in /assets/sass folder (or reuse demo.scss).

// assets/sass/demo.scss

@import "element_variables";
@import "paper-dashboard";

...

// main.js 

import './assets/sass/demo.scss'

Upvotes: 1

Related Questions