VueJs component node modules css/js not loaded

Question

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?

Please add Test.vue and any errors that you are seeing in your CLI that is running webpack. — zero298
– zero298, Commented Aug 14, 2018 at 14:15
I updated my answer, you can see that I import some .scss files. I'm also using a custom template: demos.creative-tim.com/vue-paper-dashboard . The Test.vue is a basic vue component with <template><script><style> parts. The problem is that I don't know how to load the css/js from the template when I'm loading the component. On npm run build the css/js files from node modules are not generated/combined in the existing css and js files. — Pascut
– Pascut, Commented Aug 14, 2018 at 14:20

hgiasac · Accepted Answer · 2018-08-14 15:12:15Z

1

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'

answered Aug 14, 2018 at 15:12

hgiasac

2,23319 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJs component node modules css/js not loaded

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related