webpack.config.js

const path = require('path')

module.exports = {
  entry: './src/index.js',
  watch: true,
  mode: 'production',
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // Inserts all imported styles into the html document
          { loader: 'style-loader' },

          // Translates CSS into CommonJS
          { loader: 'css-loader' },

          // Compiles Sass to CSS
          {
            loader: 'sass-loader',
            options: { includePaths: ['app/styles.scss'] },
          },

          // Reads Sass vars from files or inlined in the options property
          {
            loader: '@epegzz/sass-vars-loader',
            options: {
              // You can specify vars here
              vars: {
                greenFromWebpackConfig: 'opaque(green, 0.5)', // `opaque` is defined in `config/utils.scss` which gets loaded below
              },
              files: [
                // You can include sass files
                path.resolve(__dirname, 'config/utils.scss'),
                // You can include JSON files
                path.resolve(__dirname, 'config/sassVars.json'),
                // You can include JavaScript files
                path.resolve(__dirname, 'config/sassVars.js'),
              ],
            },
          },
        ],
      },
    ],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
}