解决 npm 模块依赖答案

【问题标题】：resolve npm module dependencies解决 npm 模块依赖
【发布时间】：2017-12-30 05:47:49
【问题描述】：

对于一个项目，我正在使用我构建的一个库，以便在不同的应用程序之间共享 Vue 组件。

因此，我将组件库作为 npm 模块导入，并将其添加到应用程序 package.json 中，效果很好。

问题是当我尝试在组件库的单个组件中导入某些内容时，应用程序无法解决该组件的依赖关系。

例如组件库中的组件：

  <template>
    <!-- my html -->
  </template>
  </script>
    // my script
  </script>

  <style scoped>
  // here I import the basic style for the component:
  @import "../../assets/base";

在应用程序 package.json 我有：

  "components": "git+ssh://git@git.xxxxx.com:xxxxx/xxxxx/my-library.git#development",

然后我像这样在我的项目中正常使用该组件：

  import MyComponent from "./components/MyComponent.vue";

组件库工作正常，但是当我在应用程序中导入组件时，我从 webpack 收到以下错误：

This dependency was not found:

* -!../../../../css-loader/index.js?sourceMap!../../assets/base in ./~/css-loader?sourceMap!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-28803148","scoped":true,"hasInlineConfig":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./~/components/src/core/MyComponent.vue
To install it, you can run: npm install --save -!../../../../css-loader/index.js?sourceMap!../../assets/base

当然，如果我将 @import 替换为所需的实际 css，一切正常。我怎样才能使这个配置起作用？

【问题讨论】：

你是否安装并配置了css-loader？这就是错误所指的内容。
为什么要使用组件的相对路径？它应该是node_modules 中的一个，而导入是components/MyComponent.vue。此外，CSS 导入是../../assets/base，这是两个目录，如果它在MyComponent.vue 中，则意味着它正在模块外部寻找它，并且效果不佳。这是故意的吗？

标签： css node.js webpack vue.js

【解决方案1】：

我的错，错误只是没有在组件的样式声明中添加 lang="scss"：

  <style scoped>

这应该是：

  <style scoped lang="scss">

【讨论】：