sassLoader not working

[absiddiqueLive]

package.json

{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.19.0",
        "node-sass": "^4.9.3",
        "sass-loader": "^7.1.0",
        "webpack-notifier": "^1.6.0"
    },
    "license": "UNLICENSED",
    "private": true,
    "scripts": {
        "dev-server": "encore dev-server",
        "dev": "encore dev",
        "watch": "encore dev --watch",
        "build": "encore production"
    },
    "dependencies": {
        "bootstrap": "^4.1.3",
        "bootswatch": "^4.1.3",
        "jquery": "^3.3.1",
        "popper.js": "^1.14.4"
    }
}

webpack.config.js

var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')

    .addEntry('app', './assets/js/app.js')

    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .enableVersioning(Encore.isProduction())

    .enableSassLoader(function(options) {
        options.includePaths = ['node_modules'];
    }, {
        resolveUrlLoader: true
    })
    .autoProvidejQuery()
;

let config     = Encore.getWebpackConfig();

config.module.rules.push({
    test: /\.scss$/,
    use: [
        "style-loader", // creates style nodes from JS strings
        "css-loader", // translates CSS into CommonJS
        "sass-loader" // compiles Sass to CSS, using Node Sass by default
    ]
});

//module.exports = config; // Try this too
module.exports =  Encore.getWebpackConfig();

assets/js/app.js

let $ = require('jquery');

require('bootstrap');

require('../css/app.css');

console.log('Hello Webpack Encore! Edit me in assets/js/app.js');

1st assets/css/app.css working

@import "~bootstrap/dist/css/bootstrap.css";

2nd assets/css/app.css not working

@import "~bootswatch/dist/flatly/_variables.scss";

Result

// Flatly 4.1.3
// Bootswatch
.....

$white:    #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #ecf0f1 !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #b4bcc2 !default;
$gray-600: #95a5a6 !default;
$gray-700: #7b8a8b !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black:    #000 !default;

.....

/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnB 
........
nNvdXJjZVJvb3QiOiIifQ==*/

3rd assets/css/app.css not working

@import "~bootstrap/scss/bootstrap.scss";

Result

* -!../../css-loader/index.js??ref--1-2!./alert in ./node_modules/css-loader??ref--1-2!./node_modules/bootstrap/scss/bootstrap.scss
* -!../../css-loader/index.js??ref--1-2!./badge in ./node_modules/css-loader??ref--1-2!./node_modules/bootstrap/scss/bootstrap.scss
* -!../../css-loader/index.js??ref--1-2!./breadcrumb in ./node_modules/css-loader??ref--1-2!./node_modules/bootstrap/scss/bootstrap.scss
........

Yarn Status

info fsevents@1.2.4: The platform "linux" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > sass-loader@7.1.0" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
[4/4] Building fresh packages...

[Lyrkan]

Hello @absiddiqueLive,

First of all I think you can remove the config.module.rules.push({ /* ... */ }) that you added in your webpack.config.js. It should not be needed since you also call addSassLoader (you'd end up with the same thing twice) and it is not used if you export Encore.getWebpackConfig() afterwards anyway.

I'm not sure to understand exactly the issue you are having, did you try following the instructions from Bootswatch's documentation? It should work fine if everything is imported in the right order:

@import "~bootswatch/dist/flatly/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/flatly/bootswatch";

If it still doesn't work, maybe try renaming your app.css file to app.scss.