Vue-cli import relative scss is not working for vendors **external** librairies **in style files**

0
votes

Vue-cli (old syntaxe of) import relative scss asset is not working for vendors external librairies in style files :

  • importing project relative scss (in src) is always ok.
  • importing external relative scss (in node_modules) is ok inside tag.
  • importing external relative scss (in node_modules) in scss file NOK.

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

1
webpack-style-loadervue-cli
In fact, I does work. The notation ../../../node_modules/bulma is deprecated. – Lucile Fievet

1 Answers

1
votes

In fact, I does work with the new notation of import :

The notation \@import "../../../node_modules/bulma" is deprecated, the correct notation is \@import "~bulma/sass/utilities/_all";

You can see simple exemple of generated vue project with external bulma and buefy css import there : https://github.com/vuejs-templates/webpack