Webpack SCSS compiling but the brower is not updating

This is my first post ever on Stack Overflow, because this time, I really, really need your help.

I am currently working on a pretty simple Symfony 5 project that organizes a League of Legends tournament, so I’ve made the classic installation of Symfony with Webpack and API-Platform.

Anyway, development is going pretty well, since I encountered something really special, and pretty weird to explain : my CSS is compiling without any error, BUT, the browser is not updating it. The weirdness doesn’t stop here.

First of all, here is my code that use to be working really well :

div.aleatoireman-choice {
  display: inline-block;
  overflow: hidden;
  width: 350px;
  height: 750px;
  border: 2px solid $blue;
  margin: 25px auto;
  position: relative;
  text-align: center;
  cursor: pointer;
  > img {
    position: absolute;
    left: 0; top: 0;
    width: 350px;
    height: 750px;
    display: block;
    transform: scale(1);
    transition: all .4s cubic-bezier(.75, .25, .25, .75);
  }
  > a {
    text-decoration: none;
    div.wrapper {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .35);
      span.aleatoireman-choice-link {
        display: block;
        text-transform: uppercase;
        transform: translateY(375px);
        font-size: 1.25em;
        position: relative;
        color: white;
        padding: 5px 0;
        text-decoration: none;
        &:before, &:after {
          content: '';
          position: absolute;
          background: white;
          width: 0; height: 0;
          transition: all .4s cubic-bezier(.75, .25, .25, .75);
        }
        &:before {
          top: 0; left: 0;
        }
        &:after {
          right: 0; bottom: 0;
        }
      }
    }
  }
  &:hover {
    > img {
      transform: scale(1.25);
      filter: blur(2px);
    }
    > a > div > span.aleatoireman-choice-link {
      &:before, &:after {
        width: 350px;
        height: 1px;
      }
    }
  }
}

This part of stylesheet was doing great, till I’ve added some more CSS…

After adding more CSS, the browser stopped updating CSS, even after I cleared the caches.

Well, I mean OK the code is causing a strange bug well, let’s remove it and see. But nope, even after removing the added CSS, that was not working anymore. Then, I tried to remove the code you’re seeing above, and… it worked again. (which is pretty strange because it was the exact same code as before)

Whenever I was pasting the code back to the stylesheet, the browser didn’t want to update anymore.

If I close PHP Storm, come back and start compilation, and go the page, I’ll have no CSS at all (if I let this part of code).

Last thing, I’ve also tried to re-write this code. It was updating correctly till I was arrived to the

&:before {
    top: 0; left: 0;
}
&:after {
    right: 0; bottom: 0;
}

The browser was refusing again to update. Then, I decided to re-write the code from the bottom to the top and… it was working till I had the

> img {
    position: absolute;
    left: 0; top: 0;
    width: 350px;
    height: 750px;
    display: block;
    transform: scale(1);
    transition: all .4s cubic-bezier(.75, .25, .25, .75);
  }

part. I can write whatever I want instead of > img etc, the browser will stop updating.

Here I am, completly out of ideas of what could cause this bug. Maybe I am missing something really obvious, maybe not.

Thank you for taking time !

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *