CSS vs SCSS, currently I have come to the point that the main advantage of SASS for me was splitting the files. Since CSS now provides a solution for variable. Another benefit of SASS is nesting style rules. Which absolutely is a benefit, hence not used carefully could lead to longer selectors with increased specifity.

So currently the ideal situation for me would be able to bundle several css files in to one css file with the right order. One possible option would be to use a cli option like cat on lunix

cat scr/css/styles.css scr/css/headings.css > dist/css/styles.css

Another option which which I prefer is to keep it in webpack like this, with the help of mini-css-extract-plugin (css-loader is also required).

Implementing

1. Install and css-loader and add mini-css-extract-plugin

run `npm install –save-dev css-loader mini-css-extract-plugin`

add `const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’);` in the webpack.config.js

2. Add the styles in the entry section

entry: {
    ...
    styles: [
      path.resolve(__dirname, './src/css/styles.css'),
      path.resolve(__dirname, './src/css/headings.css'),
    ]
  },

3. add the rules for CSS

module: {
    rules: [
      ...
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      ...
    ],
  },

4. Always output chunks for the CSS

optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },

5. Add the MiniCssExtractPlugin to the plugin section

plugins: [
    ...
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],

Wrap up

I like this approach, since standard CSS can be used which will improve and extend its responsibilities over time. It will never deprecate which is a huge bonus.
And it is flexible, I can make as many bundles as I wish and even decide to leave some CSS files out of the bundling process, for example to make use of HTTP2. A downside might be that you need to remember to manually add the the css files to the `webpack.config.js` file to get the styles.