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

【问题标题】：how to import all css of node_modules in vuejs如何在 vuejs 中导入 node_modules 的所有 css
【发布时间】：2017-12-12 10:47:33
【问题描述】：

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

中执行此操作

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

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

【问题讨论】：

虽然@vamsi 的回答提供了导入的语法，但我发现我不需要修改 webpack 配置。这样做会导致编译错误。解释见这里：stackoverflow.com/questions/37031123/…

【解决方案1】：

你可以在 main.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>

【讨论】：