Sass nested style bring ignored/invalid

user_1532800 0
Viewed 230

I am working on a Vue application which is using @import url() and my nested style is shown as the image attached below. I found out that as I am using external .scss that is why it why my styles aren't converted to css but I don't understand why? and what to do about it. following is my code

  li{
    border-bottom: 1px solid #eaeaea;
    background: #fff;
  a{
    div{
      border: 1px solid red;
    }
  }
}

image mixin not picked up

There is no error while compiling as well.

vuejs2 sass
2 Answers

That looks like you included SASS code to your html.
If you may like you should check:

  1. In your html file: did you really linkt the .css file to your html or did you link the .scss file to html.
  2. In your CSSfile: is the SASS code compiled at all.

UPDATE: ERROR RECONSTRUCTED

What I did:

Added This code to a CSS file style.css ...

li {
  border-bottom: 1px solid gray;
  background: red;
  a {
    div {
      border: 1px solid red;
    }
  }
}

Linked that to my HTML: <link href="style.css" type="text/css" rel="stylesheet">

... and got follwing error in Chrome:

Reconstructed Error in Chrome

RESULT: It is raw SCSS code which is includeded in a source which is marked as CSS so the browser is interpreting it as CSS

Note: Including as .scss file instead was not the same result.

I am not quite sure about the difference to your error which names <style> as source (in picture top right edge). But if you click on the source link in the browser it should lead you to the source.

Up from here is no chance to follow the error.
So please check your CSS sources:

  1. Is the .css file the right one: maybe your are writing your SCSS in a CSS file which off course does not compile. That could happen i.e. when you setup the project and do a misspelling creating the SCSS file.

  2. Maybe that code is added to the <style> tag in the head or body (added by a module or whatever) or is it marked as <style lang="css">

... or any other method to add/link css

Indeed best way is to check all your linked css sources.
That cannot be done up from here without more information :-(

Also possible but VERY ATYPICAL FOR THAT ERROR PATTERN: maybe check your SASS compiler once more ... if it is an unknown issue which blocks it to compile.

user_92684850

Looking at your code snippet, you simply forgot to close a bracket ? Try to provide a properly indented snippet of code like this

li {
  background: hsl(0, 0%, 100%);
  border-bottom: 1px solid hsl(0, 0%, 92%);
  a {
    div {
      border: 1px solid hsl(60, 85%, 57%);
    }
  }
}

And if you meant

li {
  border-bottom: 1px solid #eaeaea;
  background: #fff;
}

a {
  div {
    border: 1px solid red;
  }
}

Here is your solution so far.

Also, as stated in my comment, you do need to not forget the ; at the end of your import, like @import '~cool_stuff';. ESlint can really help on this and is backed into the CLI generated project.

user_88165850
Related