Webpack scss transpiling. minimum

webpack.config.js

const path = require('path');
const MiniCss = require('mini-css-extract-plugin');

module.exports = (env = {}, argv = {}) => {

    const config = {
        mode: argv.mode || 'development', // we default to development when no 'mode' arg is passed
        // mode: argv.mode || 'production', // we default to development when no 'mode' arg is passed
        entry: {
            main: path.join(__dirname, 'styles', 'index.scss'),
        },
        output: {
            path: path.resolve(__dirname, '../wwwroot/dist'),
        },
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        // TODO: add css minifications
                        // TODO: add source maps for the .sccs files
                        MiniCss.loader, // 3
                        'css-loader', // 2
                        'sass-loader' // 1
                    ]
                }
            ]
        },
        plugins: [
            new MiniCss({})
        ]
    }

    return config;
};

webpack.config_TS+SCSS.js

const path = require('path');
const MiniCss = require('mini-css-extract-plugin');

module.exports = (env = {}, argv = {}) => {
    const config = {
        // cache: true,
        mode: argv.mode || 'development',   // we default to development when no 'mode' arg is passed
        // mode: argv.mode || 'production', // we default to production  when no 'mode' arg is passed
        entry: {
            'style.css': path.join(__dirname, 'styles', 'style.scss'),
            'index.js': path.join(__dirname, 'scripts', 'index.ts'),
        },
        output: {
            path: path.resolve(__dirname, '../wwwroot/dist'),
            filename: 'result-[name]'
        },
        devtool: 'source-map',
        module: {
            rules: [
                {
                    test: /\.scss$/,
                    use: [
                        // TODO: add css minifications
                        // TODO: add source maps for the .sccs files
                        MiniCss.loader, // 3
                        'css-loader', // 2
                        'sass-loader' // 1
                    ]
                },
                {
                    test: /\.ts(x?)$/,
                    exclude: /(node_modules|bower_components)/,
                    use: [ 'awesome-typescript-loader' ]
                }
            ]
        },
        plugins: [
            new MiniCss({})
        ],
        resolve: {
            extensions: ['.ts', '.tsx', '.js']
        }
    }

    return config;
};