How to lint SASS/SCSS on Laravel Mix

Question

I have failed to find a solution for this. The only possible outcome I've seen so far is Laravel-Elixir-SCSS-Lint but the current download numbers doesn't indicate me this is the general choice of the public. I did look into the Laravel Mix Extensions page , nothing obvious there either. Never thought there was not going to be a clear option for Laravel Mix having lint SASS/SCSS before with Gulp, Grunt, etc.

Thank you in advance for the help.

Update

After much digging I have come to the following solution, however the linting is not doing a good job and several mistakes are ignored (check console output at the end)

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "Description here.",
  "main": "index.js",
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "npm run production",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Me",
  "license": "ISC",
  "devDependencies": {
    "aos": "^2.3.4",
    "browser-sync": "^2.26.4",
    "browser-sync-webpack-plugin": "^2.0.1",
    "cross-env": "^5.2.0",
    "laravel-mix": "^4.0.15",
    "postcss-reporter": "^6.0.1",
    "resolve-url-loader": "^3.1.0",
    "sass": "^1.19.0",
    "sass-loader": "^7.1.0",
    "stylelint": "^10.0.1",
    "stylelint-config-recommended": "^2.2.0",
    "stylelint-order": "^3.0.0",
    "stylelint-scss": "^3.6.0",
    "vue-template-compiler": "^2.6.10"
  }
}

webpack.mix.js

let mix = require('laravel-mix');

if (!mix.inProduction()) {
    mix.webpackConfig({
        devtool: 'source-map'
    })
    .sourceMaps()
}

mix
  .copy('libraries/jquery-vide/jquery.vide.min.js', 'dist/js/')
  .copy('libraries/headroom/headroom.js', 'dist/js/')
  .js('src/js/ab2019.js', 'dist/js/')
  .js('src/js/ab2019-vide.js', 'dist/js/')
  .sass('src/sass/style.scss', 'dist/css/')
  .options({
    processCssUrls: false, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
    postCss:[
      require("stylelint")({ /* your options */ }),
      require("postcss-reporter")({ clearReportedMessages: true })
    ]
  })
  .browserSync({
    files: "dist/css/style.css"
  })
  .setPublicPath('dist');

.stylelintrc.json

{
  "extends": "stylelint-config-recommended",
  "plugins": [
    "stylelint-order",
    "stylelint-scss"
  ],
  "rules": {
    "block-no-empty": true,
    "declaration-colon-space-after": "always",
    "indentation": [ 2, {
      "message": "Please use 2 spaces for indentation. Tabs make The Architect grumpy.",
      "severity": "warning"
    } ],
    "no-descending-specificity": null,
    "order/order": [
      "declarations"
    ],
    "order/properties-alphabetical-order": true,
    "scss/dollar-variable-colon-space-after": "always-single-line"
  }
}

style.scss

$x:1;

.test {
  color: white;
  background: red
}

.foo {}

a {

}

.bar {
   color:#4fd;
  padding: 10px 0px;
}

console output

$ npm run dev

> test@1.0.0 dev /fake/path
> npm run development


> test@1.0.0 development /fake/path
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 40% building 7/8 modules 1 active ...e/fake/path/src/sass/style.scss
src/sass/style.scss
32:2  ⚠  Expected background to come before color (order/properties-alphabetical-order) [stylelint]

 70% building 9/10 modules 1 active ...e/fake/path/src/sass/style.scss
src/sass/style.scss
32:2  ⚠  Expected background to come before color (order/properties-alphabetical-order) [stylelint]

 98% after emitting SizeLimitsPlugin

 DONE  Compiled successfully in 1489ms

Answer 1

If anyone has this problem I managed to make it work like this. First I installed:

npm install stylelint  stylelint-webpack-plugin --save-dev

Then I added this configuration inside webpack.mix.js file

const StylelintPlugin = require('stylelint-webpack-plugin');

mix.webpackConfig({
    ...
    plugins: [
        new StylelintPlugin({ // put your config here
            configFile: '.stylelintrc', // path to config file
            failOnError: false // don't fail on error
        })
    ]
});

Peace