Webpack-encore: Replace Sass Loader with Fast Sass Loader

[xyNNN]

Hey folks,

how can I replace the default sass-loader with another implementation like https://github.com/yibn2008/fast-sass-loader? It's possible via the API from Symfony Encore?

[Lyrkan]

Hi @xyNNN,

There is nothing built into Encore that would allow you to only replace the default sass-loader by another loader.

But you can probably use fass-sass-loader quite easily by calling addLoader() instead of enableSassLoader().

[xyNNN]

Thanks @Lyrkan !

[DoubleYo]

Hi,
Encore display this error when i try to replace sass loader

Error loading ./assets/css/main.scss

 FIX  To load SASS files:
        1. Add Encore.enableSassLoader() to your webpack.config.js file.

And webpack.config.js part

    .addLoader({
        test: /\.s[ac]ss$/,
        loader: 'fast-sass-loader',
        options: {
            sourceMap: !Encore.isProduction()
        }
    })

Any solutions ?

[gempir]

Any Update/Ideas on this. I'm having the same issue.

[stof]

that's probably because your config of the fast-sass-loader is wrong. you took the code snippet for webpack 1 from the fast-sass-loader readme, but Encore is based on webpack 3

[runawaycoin]

Hi,
This works well for me, my build time went from 6 minutes! (Windows, on Linux it was aleady fast) down to ~30 seconds. I have also added hard-source-webpack-plugin for even faster builds.

.addLoader({
        test: /\.s[ac]ss$/,
        use:
            [
                {
                    "loader": "extract-text-webpack-plugin/dist/loader.js",
                    "options": {
                        "omit": 1,
                        "remove": true
                    }
                },
                {
                    "loader": "style-loader?sourceMap"
                },
                {
                    "loader": "css-loader",
                    "options": {
                        "minimize": Encore.isProduction(),
                        "sourceMap": !Encore.isProduction(),
                        "importLoaders": 0
                    }
                },
                {
                    "loader": "resolve-url-loader",
                    "options": {
                        "sourceMap": !Encore.isProduction()
                    }
                },
                {
                    "loader": "fast-sass-loader",
                    "options": {
                        "sourceMap": !Encore.isProduction()
                    }
                }
            ]
        }
    )

i had to get the config generated by:
.enableSassLoader()

and just changed "sass-loader" to "fast-sass-loader".

I added this to log out the full config:

Object.defineProperty(RegExp.prototype, "toJSON", {
    value: RegExp.prototype.toString
});
console.log(JSON.stringify(config, null, 4));