如何在vuejs中导入node_modules的所有css

Question

我正在使用webpack模板和vuetify构建一个Vue.js应用程序.要导入vuetify css我在我的App.vue中这样做

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

这是正确的还是唯一的方式？因为在使用多个UI组件时它似乎不可靠.

Answer 1

您可以在yout main.js中导入它

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

为了这个工作你应该css-loader在你的webpack配置

在你的webpack中

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

要么

在App.vue组件中添加两个样式标记,一个用于全局样式,因为App.vue 是入口点,而另一个用于作用域样式,如果你有任何scoped属性.请参阅src导入.

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

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