Vue-cli import assets css relative not working

Question

i'm using vue-cli + this webpack template for my vue project, i wanted to use leaflet in my website but when i import their css file, i have the following errors :

code for import

<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

and the problem is that webpack consider the image path relative to my project root src folder, i tried to copy and past the images folder in leaflet/dist/images to my project src folder, and its worked. so how can i make this work?

you can check this link stackoverflow.com/questions/34311656/… — Aslan Mammadrzayev
– Aslan Mammadrzayev, Commented Dec 24, 2017 at 11:58

Lucile Fievet · Accepted Answer · 2018-06-08 10:18:28Z

1

Maybe it is simply the lang with sccs not corresponding with leaflet.css ?

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

This worked for me.

answered Jun 8, 2018 at 10:18

Lucile Fievet

5095 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lucile Fievet · Accepted Answer · 2018-06-08 10:12:42Z

I have quite the same problem : Vue-cli import assets css relative not working for vendors external librairies in style files :

If I take this versions of vue and @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"
  },

I have no any problems with relative links inside my application, but if I import externals like buefy or bulma, in a style file, I have the same problem.

Basic Reproduction :

Install @vue-cli @(npm remove vue-cli; npm remove -g vue-cli; npm install -g @vue/cli)
I create a basic project (vue create relative-css-demo)
Install bulma & buefy (npm install bulma buefy)
I create a basic color asset with bulma import :

src/assets/vars/colors.scss

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

Set App style in a separate scss file :

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;
}

And you have the bug :

ERROR Failed to compile with 1 errors

error in ./src/App.scss?vue&type=style&index=0&lang=scss

Module build failed (from /home/awa/Projets/node_modules/sass-loader/lib/loader.js):

@import "../../../node_modules/bulma"; ^ File to import not found or unreadable: ../../../node_modules/bulma. Parent style sheet: /home/awa/Projets/vues-templates/simple-relative-css-demo/src/assets/vars/colors.scss in /home/awa/Projets/vues-templates/simple-relative-css-demo/src/assets/vars/colors.scss (line 75, column 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 @ multi (webpack)-dev-server/client?http://localhost:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

But if I import colors inside style tag it works. Even if I import another asset scss files of my own in App.scss it is ok ...

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 Compiled successfully in 268ms

Collectives™ on Stack Overflow

Vue-cli import assets css relative not working

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related