Your data. Anywhere you go.

New Relic for iOS or Android


Download on the App Store    Android App on Google play


New Relic Insights App for iOS


Download on the App Store


Learn more

Close icon

Nested styles not working


#1

Nested styles not working

I am creating a Nerdpack to solve a problem we have with users that lose their session and have to log in constantly. But the issue I have is with the SASS code. I think it’s not being transpiled correctly into CSS.

I have included this in my SASS code:

#email-form {
  text-align: center;

  div {
    display: inline-block;

    label {
      display: inline-block;
    }
  }
}

But the generated CSS code is missing all those nested selectors and the correspondent style:

Requirements
Just create a new Nerdpack and try using nested selectors in your SASS code.


#2

Hey @dhernandez1

A couple of folks here have created a new nerdpack and added your SASS code, in our cases it is working fine the way it is, nested.

Could you try clear out any tmp files, and run nr1 nerdpack:clean and then try run it again?


#3

Ok, something weird was going on. I was investigating the issue and I discovered the CSS wasn’t being re-generated after changes, so it was serving (in local) always an old version. That clean command did the trick, though. Thank you!


#4

Awesome! Glad it’s working for you now :smiley:


#5

I’m reopening this because I still have the problem.

I have a component with this code:

<div id="email-form">
  <TextField id="email" label="Email del usuario" placeholder="usuario@correo.com" type={TextField.TYPE.EMAIL} />
  <Button onClick={this.setEmail}>Obtener datos</Button>
</div>

I’m trying to apply these styles:

#email-form {
  text-align: center;

  & > div {
    display: inline-block;

    label {
      display: inline-block;
    }
  }
}

But the generated .css file only contains the styles for the root #email-form selector:
image


#6

Hey @dhernandez1 - I’m not sure what’s going on here, but it feels like again it could need a nr1 nerdpack:clean… There may be some cache getting in the way.

I ran my own test, created the most simple nerdpack I could, my index.js shown below;

And also the styles.scss below


In my browser I see the following generated CSS, which seems fine to me.


If possible, can you try the nerdpack:clean again, and maybe open the nerdpack in a fresh cache/cookie-less browser instance?


#7

It comes and goes… When I reopened the issue I had just tried the clean command and it didn’t work. Now I’ve been a while away from the computer and I’ve just reloaded the nerdpack (no clean command or changes at all) and now it’s working.

:thinking:


#8

That’s some odd, and interesting behaviour. I’ll get this sent over to the team so they’re aware of it! Thanks @dhernandez1


#9

Thank you @RyanVeitch!