Vue.js webpack错误从外部库导入css文件答案

【问题标题】：Vue.js webpack error importing css file from external libraryVue.js webpack错误从外部库导入css文件
【发布时间】：2018-02-04 13:46:32
【问题描述】：

我正在尝试将 aos（动画库）导入到我的测试应用中

我正常安装yarn add aos 在我的 vue 中，我正在使用以下代码

<script>
....
import AOS from 'aos/dist/aos.js'
import 'aos/dist/aos.css'

methods: {
...
installAos: function () {
  const aos = new AOS({ duration: 1200 })
  aos.init()
}, 
mounted: function () {
this.$nextTick(function () {
  ....
  this.installAos()
})
}

我在构建 w webpack (3.6.0) 时遇到错误

WARNING 编译时有 1 个警告 14:36:15

 warning  in ./node_modules/aos/dist/aos.css

 (Emitted value instead of an instance of Error)   resolve-url-loader cannot operate: CSS error
  ENOENT: no such file or directory, open '/Users/yves/Developments  /WIP/VUE.JS/hello-vue/node_modules/a
os/dist/aos.css.map'
    at Object.fs.openSync (fs.js:646:18)

似乎与加载外部css文件有关.. 没有aos.css.map

【问题讨论】：

标签： webpack vue.js css-loader

【解决方案1】：

发现为什么...

aos.css 包末尾的注释行：

/*# sourceMappingURL=aos.css.map*/

如果我禁止这条线，那么它正在正确构建

我不明白为什么 resolve-url-loader 插件会检查这一行...我会将其作为问题写给 resolve-url-loader 支持团队...

【讨论】：