Yarn build: "Failed because of a stylelint error"


Yarn build (and start) fails.

Anyone else encountering this problem? Bug in the latest stylelint it seems?

EDIT: still the same error after downgrading to Stylelint 7.10.1

Sage 9 Beta 3
NodeJS: v6.11.0
Stylelint: 7.11.0

yarn run v0.24.6
$ webpack --progress --config resources/assets/build/webpack.config.js 

 1:1  ✖  Unexpected empty source   no-empty-source

 1:1  ✖  Unexpected empty source   no-empty-source

 1:1  ✖  Unexpected empty source   no-empty-source

 1:1  ✖  Unexpected empty source   no-empty-source

 6:1  ✖  Expected empty line before at-rule   at-rule-empty-line-before

Error: Failed because of a stylelint error.

    at linterSuccess (/path/to/my/site/web/app/themes/mytheme/node_modules/stylelint-webpack-plugin/lib/run-compilation.js:34:14)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.


Yep Same Issue.

I just commented stylelint out in the wepback.config.js to get this to build.

// new StyleLintPlugin({
//   failOnError: ! config.enabled.watcher,
//   syntax: 'scss',
// }),

Seems a pain to set up to not error at almost everything? if someone has a config file for stylelint that would be handy?


Have something in those empty sass files, like a comment (and an emtpy line before :6 in main.scss) fixed the error for me (Foundation framework).

Still silly though, another new project that I started about a week ago and with the same empty files builds just fine :confused:

EDIT: never mind, still issues. No dist/styles folder and a bunch of errors when yarn run starting last weeks project as well.


Oops. I merged stylelint stuff but if you select a framework besides Bootstrap it currently clears out some Sass files. Those files need at least a comment at the top, so will get that fixed.

@Jake_Dickinson are you not seeing https://github.com/roots/sage/blob/master/.stylelintrc?

So, what errors?

Created an issue: https://github.com/roots/sage/issues/1905


Errors are gone now. Not sure what I did (wrong).


FWIW, I’m getting this error when I run yarn build:

Error: Failed because of a stylelint error.

    at linterSuccess (/Users/[…]/node_modules/stylelint-webpack-plugin/lib/run-compilation.js:34:14)
error Command failed with exit code 1.

But there are no errors when I run yarn run lint:styles:

yarn run v0.27.5
$ stylelint resources/assets/styles/**/*.{css,sass,scss,sss,less}
Done in 2.43s.


  • Sage 9.0.0-beta.3
  • Stylelint 7.12
  • Node 6.9.4

Not sure what’s going on, but commenting out the Stylelint plugin as @Jake_Dickinson suggested fixes it.

I tried updating to the following but still got the error:

  • Node 8.2.1
  • “stylelint”: “~8.0”,
  • “stylelint-config-standard”: “~17.0”,
  • “stylelint-webpack-plugin”: “^0.9”,


The default error when building with yarn build isn’t very helpful. However, I was able to get a more detailed response using yarn run lint:styles:

yarn run v0.27.5
$ stylelint resources/assets/styles/**/*.{css,sass,scss,sss,less}

 2:25  ✖  Expected "#FF5722" to be "#ff5722"   color-hex-case                  
 5:29  ✖  Unexpected missing end-of-source     no-missing-end-of-source-newline

error Command failed with exit code 2.

I made those two changes to _variables.scss and it compiled happily.

Sage 9 Beta 3
yarn 0.27.5
Node 8.2.1
npm 5.3.0
Stylelint 7.13.0


This was driving me nuts - no error messages when running build or start.

anyway by updating the config to:

    new StyleLintPlugin({
      failOnError: !config.enabled.watcher,
      emitErrors: true,
      quiet: false,
      syntax: 'scss',

I was able to lint - and see the cause of the lint errors - sanity restored.

also FYI the style lint rules are defined in package json now - in case like me you had a .rc file that stopped working.

"stylelint": {
    "extends": "stylelint-config-standard",
    "rules": {
      "no-empty-source": null,
      "max-empty-lines": 6


Thanks, that saved my day. Got to wonder why this is not in the default Webpack config. If the build process fails we should see helpful error message by default @benword wouldn’t that make sense?

Lack of meaningful SCSS error messages in Sage 9

I created .stylelintignore file in theme root, he has same syntax as .gitignore and added *.scss *.css to it. You can check docs here https://stylelint.io/user-guide/configuration/#stylelintignore


Excuse me, Is there a way to disable this garbage? I’m sorry but I really could give a crap if there’s an extra space at the end of the line or a comment doesn’t have a line before it. WTF

How do I disable this at least for the time being while I’m developing my theme? I HATE this stylelint thing and I don’t know a lot about using packages and such so I’m not sure how to just remove it if that can even be done?

I’m importing UIKit CSS which I have no control over how they make their code and this is giving me all sorts of errors about Unexpected empty line before at-rule


Yeah man, it’s real easy. You might have been able to figure it out in the time it took you to write about how it’s garbage.

Remove these lines 4 lines:

Stylelint not outputting errors after update

If anyone’s interested in an SCSS / SASS setup, I followed this guide to create something that’s working pretty well.

As @chrisk2020 mentioned, a good first step is to update your webpack.config.js file with the following, so you get the benefit of Stylelint’s errors.

new StyleLintPlugin({
  failOnError: !config.enabled.watcher,
  emitErrors: true,
  quiet: false,
  syntax: 'scss',

That way, you’ll get this kind of thing in your terminal

Next, if you’re using SCSS I found the following settings work well in my package.json file:

"stylelint": {
    "extends": "stylelint-config-sass-guidelines",
    "rules": {
      "indentation": 2,
      "max-nesting-depth": 10,
      "selector-max-compound-selectors": 5,
      "string-quotes": null

This requires a couple of additional devDependencies in the same package.json file too.

"stylelint-config-sass-guidelines": "~4.1",
"stylelint-scss": "~2.0",


Very helpful, thanks!


Nice one! Thank you Ben.


For some reason the above didn’t work for me but simply changing failOnError: false, did work.


it helps! Thanks Ben