Yarn start > Unexpected missing end-of-source newline no-missing-end-of-source-newline

[mattia]

i am a newly of sage9, I finally finished the installation of the theme and all the stuff that I need for this.
I started to write some basic css just to test if everything works well.

I run yarn start and I wrote this css in the _pages.scss (a quick and stupid test)

body {
  background-color: green;
}

but this given to me this error:

resources/assets/styles/layouts/_pages.scss
 3:1  ✖  Unexpected missing end-of-source newline   no-missing-end-of-source-newline

i know that I can disable StyleLint plugin in the webpack.config.js, but I would like to keep this so I can learn how I can write a more clean code.

but I don’t understand what I am doing wrong.
any suggestion?

thanks

[MWDelaney]

Add a return at the bottom of your _pages.scss file.

body {
  background-color: green;
}

[mattia]

thanks @MWDelaney, it works like a charm

[bilalmalkoc]

I got same error. And put this code al .scss files (footer, header, pages, posts, sidebar…) but stil showing this error.

Trying this code:

body {
    background-color: yellowgreen;
}

2:5  ×  Expected indentation of 2 spaces           indentation
3:1  ×  Unexpected missing end-of-source newline   no-missing-end-of-source-newline

[mattia]

you have to indent background-color with 2 spaces and you should add a new line at the end

like this

[bilalmalkoc]

Thank you it works. Is any options change it to 4 spaces?

[mattia]

Changing indentation to 4 spaces

Does anyone else find it annoying that Sage uses 2 spaces instead of 4? PSR standards clearly define the indentation to be 4 spaces (not tabbed which thankfully Sage follows), so why use 2? As a follower of PSR I find I have to convert all files from 2 to 4 spaces, which is inconvenient. This isn’t just a personal preference here, it’s community standards that Sage should be following. What do you guys think?

[benword]

@mattia that’s for PHP and not CSS, and no longer relevant

@bilalmalkoc read up on stylelint documentation

[mdarmanin]

Why do we need to add a return at the bottom of the .scss file?

[alwaysblank]

@mdarmanin Sage extends stylelint-config-standard, which defines that rule here: https://github.com/stylelint/stylelint-config-standard/blob/2da161aac328df9d0f31a4202a30894071e3e2d8/index.js#L81 If you don’t like that rule, you can customize your stylelint configuration to remove it.