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.

Answer 1

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>