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: stackoverflow.com/questions/37031123/… — Collierton
– Collierton, Commented Dec 28, 2018 at 12:37

tjbp · Accepted Answer · 2020-09-25 09:24:07Z

55

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>

edited Sep 25, 2020 at 9:24

tjbp

3,5573 gold badges26 silver badges35 bronze badges

answered Jul 8, 2017 at 10:44

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

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

Collectives™ on Stack Overflow

how to import all css of node_modules in vuejs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related