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

Question

我正在构建一个 Vue.js 应用程序，从 webpack 模板和 vuetify 开始。 要导入 vuetify css，我在我的 App.vue

中执行此操作

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

这是正确的还是唯一的方法？因为它在使用多个 UI 组件时看起来并不可靠。

Answer 1

你可以在你的 ma​​in.js 中导入它

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

为了让它工作，你应该在你的 webpack 配置中有 css-loader

在你的webpack

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

或

在您的 App.vue 组件中添加两个样式标签，一个用于全局样式，因为 App.vue 是入口点，另一个用于作用域样式(如果有的话)作用域属性。参见 src imports .

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

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