Vue |如何从特定的NPM包导入样式表？

Question

我正在尝试加载animate.css。使用命令npm install --save animate.css安装此程序包。现在，在项目中导入它的最佳方法是什么？

我偶然发现了一些解决方案，要求将文件复制到静态文件夹中并从那里加载。但我宁愿不这样做，因为如果我们从它的包装中移除它，我们就会失去NPM的所有好处。

Answer 1

假设您希望在应用程序中全局使用animate.css

在 webpack

中

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

你 main.js

import 'animate.css/animate.min.css'

Answer 2

我在项目中使用类似方案所做的是src imports。

在 App.vue 组件中添加两个样式标记，一个用于全局样式，因为 App.vue 是入口点，其他用于作用域样式（如果您有任何范围属性。

<style src="animate.css/animate.min.css">
    /* global styles */
</style> 

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