Why are my global styles not working in a vue.js 2 app

Question

I have a very weird issue. In a freshly generated vue.js project with the Vue CLI my scss files are not working properly. I am using scss configured in vue.config.js like this:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/scss/all.scss";
        `
      }
    }
  }
};

I have multiple files in the scss folder which are okay until the moment I am using the scoped keyword in a single file component for example my nav. And then my global styles are ignored for some reason:

<template>
  <div class="nav">
    <ul class="nav__menu">
      <li class="nav__item">
        <span>item</span>
      </li>
      <li class="nav__item">
        <span>item</span>
      </li>
      <li class="nav__item">
        <span>item</span>
      </li>
      <li class="nav__item">
        <span>item</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {};
</script>
<style lang="scss" scoped>
 .nav {
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,00c2a9+100 */
   background: rgb(30, 87, 153); /* Old browsers */
   background: -moz-linear-gradient(
     top,
     rgba(30, 87, 153, 1) 0%,
     rgba(0, 194, 169, 1) 100%
   ); /* FF3.6-15 */
   background: -webkit-linear-gradient(
     top,
     rgba(30, 87, 153, 1) 0%,
     rgba(0, 194, 169, 1) 100%
   ); /* Chrome10-25,Safari5.1-6 */
   background: linear-gradient(
     to bottom,
     rgba(30, 87, 153, 1) 0%,
     rgba(0, 194, 169, 1) 100%
   ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#00c2a9',GradientType=0 ); /* IE6-9 */
   border-radius: 15px;
   color: #fff;
   height: calc(100vh - 8px);
   padding: 10px;
   position: fixed;
   top: 4px;
   left: 4px;
   width: 200px;
   z-index: 5;
 }
</style>

global styles:

// not working
html {
  background: black;
  box-sizing: border-box;
  font-size: 13px;

  // but this is working
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
}

This have never happened to me until now. Is there something I am missing, because I can't see it :( Thanks in advance.

I am on Manjaro Linux 18.1.5, with node.js 10.16.0 and npm 6.13.1 if that can help.

dako · Accepted Answer · 2020-02-18 06:49:31Z

5

For future readers - I found the problem... scss files are not imported to a component if it doesn't contain a nonempty style tag.

Found out that it's pretty much a bad idea for every scss file to be imported in all of the components, because it will lead to a very big css file in the end with a lot of unused/duplicated code.

So now I am using the 'global' scss files for just variables and mixins and everything runs smooth.

answered Feb 18, 2020 at 6:49

dako

1,1932 gold badges13 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Why are my global styles not working in a vue.js 2 app

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related