Vue-cli 导入资产 css 相对不起作用

Question

我正在为我的 vue 项目使用 vue-cli + 这个 webpack 模板，我想在我的网站中使用传单，但是当我导入他们的 css 文件时，我有以下错误：

导入代码

<style lang="scss">
    @import "../node_modules/leaflet/dist/leaflet.css";
</style>



These relative modules were not found:

* ./images/layers-2x.png in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90",
"scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles
&index=0&bustCache!./src/App.vue
* ./images/layers.png in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","sc
oped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&in
dex=0&bustCache!./src/App.vue
* ./images/marker-icon.png in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped":false,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/App.vue

问题是 webpack 考虑了相对于我的项目根 src 文件夹的图像路径，我尝试将 leaflet/dist/images 中的图像文件夹复制并粘贴到我的项目 src 文件夹中，并且它有效。那么我该如何做呢？

Answer 1

也许只是 sccs 的 lang 与 leaflet.css 不对应？

<style lang="css">
    @import "../node_modules/leaflet/dist/leaflet.css";
</style>

这对我有用。

Answer 2

我也有同样的问题：Vue-cli import assets css relative not working for vendor external library in style files：

如果我使用这个版本的 vue 和 @vue-cli ：

packadge.json

 "dependencies": {
    "vue": "^2.5.16"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.0-beta.15",
    "@vue/cli-plugin-eslint": "^3.0.0-beta.15",
    "@vue/cli-service": "^3.0.0-beta.15",
    "buefy": "^0.6.6",
    "bulma": "^0.7.1",
    "vue-template-compiler": "^2.5.16"
  },

我的应用程序内部的相对链接没有任何问题，但是如果我在样式文件中导入 externals 像 buefy 或 bulma，我也会遇到同样的问题。

基本复制：

• 安装@vue-cli @(npm remove vue-cli; npm remove -g vue-cli; npm install -g @vue/cli)

• 我创建一个基础项目(vue create relative-css-demo)

• 安装 bulma & buefy (npm install bulma buefy)

• 我使用 bulma 导入创建了一个基本颜色资源：

src/assets/vars/colors.scss

@import "../../../node_modules/bulma/sass/utilities/_all";

• 在单独的 scss 文件中设置 App 样式：

src/App.vue

<style lang="scss" src="./App.scss"></style>

src/App.scss

@import './assets/vars/colors.scss'
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

你有错误：

ERROR 编译失败，出现 1 个错误

./src/App.scss?vue&type=style&index=0&lang=scss 中的错误

模块构建失败（来自 /home/awa/Projets/node_modules/sass-loader/lib/loader.js）：

@import "../../../node_modules/bulma"; ^ 找不到或无法读取要导入的文件：../../../node_modules/bulma。父样式表： /home/awa/Projets/vues-templates/simple-relative-css-demo/src/assets/vars/colors.scss 在 /home/awa/Projets/vues-templates/simple-relative-css-demo/src/assets/vars/colors.scss （第 75 行，第 1 列）

@ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader??ref--8-oneOf-1-1!./node_modules/vue-loader/ lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/lib??ref--8-oneOf-1-2!/home/awa/Projets/node_modules/sass-loader/lib/loader.js?? ref--8-oneOf-1-3!./src/App.scss?vue&type=style&index=0&lang=scss 4:14-310 14:3-18:5 14:310-18:4 15:22-318 @ ./src/App.scss?vue&type=style&index=0&lang=scss @ ./src/App.vue @ ./src/main.js @多 (webpack)-dev-server/client?http://localhost:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

但是，如果我在样式标签中导入颜色，它就可以工作。 即使我在 App.scss 中导入我自己的另一个资产 scss 文件也没关系......

src/App.vue

<style lang="scss" src="./App.scss">
  @import './assets/vars/colors.scss'
</style>

src/App.scss

@import './assets/vars/noexternals.scss'
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

DONE 268ms 编译成功