Move to dart-sass instead of node-sass

[mi2oon]

Shall we switch to dart-sass for our gulp-sass?

Although node-sass is based on libsass and will continue to be updated with the latest patch and fixes, it will take more time for features to land while dart-sass will receive them immediately and has the benefit of compiling with pure JS without the need of native modules.

Well, it's twice as slow as libsass but it's pure js meaning it doesn't spin up node-gyp and avoids a build step that's annoying and error prone at times.

What do you @kraftvaerk/frontend think?

[kristoforsalmin]

Hi @mi2oon, I'm totally up for it, it also has some nice features, such as CSS imports :-) Also, as you said, removing node-gyp is quite a relief.

[mi2oon]

@racse1 I think I'll remove gulp-sass and postcss-import. 🗑

First gulp-sass as it has a default dependency on node-sass. So when installing it would still fetch/install it. I've found another project postcss-sass which looks promising and I've tested it and on another project and it seems to do the job and doesn't have node-sass as it's default dependency. Furthermore it brings us closer to having the option to completely removing gulp for our style build pipleline. ☘️

Let me know if all that is alright and I'll make a PR 🎟

[kristoforsalmin]

👍

Furthermore it brings us closer to having the option to completely removing gulp for our style build pipleline. ☘️

Really looking forward to that one 😁

---

If we were to consider using webpack for building styles, then that works just fine:

webpack.config.js

{
    test: /\.scss$/,
    use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
                plugins: [autoprefixer],
            },
        },
        'sass-loader',
    ],
}

package.json

{
   "devDependencies": {
      "sass": "*",
      "sass-loader": "*"
   }
}

[kristoforsalmin]

Fixed in #55.