How to lint SASS/SCSS on Laravel Mix - 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