how to import all css of node_modules in vuejs

Question

I am building a Vue.js app starting with the webpack template and vuetify. To import vuetify css Im doing this in my App.vue

<style> @import '../node_modules/vuetify/dist/vuetify.min.css' </style>

Is this the correct or only way? because it doesn't seem reliable when using multiple UI components.

While @vamsi's answer provides the syntax for the import, I found I did not need to modify the webpack configuration. Doing so led to compilation errors. See here for the explanation: https://stackoverflow.com/questions/37031123/why-am-i-not-being-able-to-compile-sass-with-webpack — Collierton, Dec 28 '18 at 12:37

score 52 · Answer 1 · edited Sep 25 '20 at 09:24

You can import it in yout main.js

import 'vuetify/dist/vuetify.min.css'

for this to work you should have css-loader in you webpack config

In your webpack

module: {
  loaders: [
    { test: /\.css$/, loader: "css-loader" }
  ]
}

OR

In your App.vue component add two style tags , one for global styles as App.vue is the entry point and other for scoped styles if you have any with the scoped attribute.See src imports.

<style src='vuetify/dist/vuetify.min.css'>
    /* global styles */
</style> 

<style scoped>
    /* local styles */
</style>

how to import all css of node_modules in vuejs

1 Answers1