Separate CSS files from SCSS (Webpack build)

1

Hey,

I have been trying to solve this for a couple days now but nothing I find online seems to work. What I basically am trying to do is generate separate CSS files from each SCSS file which is handled by Webpack. This is so that I can then assign the respective CSS styles to my custom elements.

However, everything I have tried just results in either no CSS being outputted or one file with all the CSS. I am currently using sass-loader, postcss-loader, css-loader and extractCssChunksWebpackPlugin.

I have tried all the answers I found on Stackoverflow but nothing seems to work. When I use the file loader, as suggested by some, I just get a string with the address to a non existent file in between style tags.

Changing to miniCSSExtractPlugin just gives me the same result as my current setup. If someone can help it could be massively appreciated.

Here is my current config:

const merge = require('webpack-merge');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const common = require('./webpack.common');
const webpack = require('webpack');
const postcssEnv = require('postcss-preset-env');
const ExtractCssChunksPlugin = require('extract-css-chunks-webpack-plugin');

module.exports = merge(common, {
    mode: 'development',
    entry: [
        'webpack-hot-middleware/client',
        './src/assets/web-components/contact-modal.js',
        '@babel/polyfill'
    ],
    module: {
        rules: [{
                test: /\.(s*)css$/,
                use: [{
                        loader: ExtractCssChunksPlugin.loader,
                        options: {
                            hot: true,
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        }
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            indent: 'postcss',
                            plugins: () => postcssEnv(),
                            sourceMap: 'inline',
                        },

                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env'
                        ],
                        plugins: [
                            "@babel/plugin-transform-regenerator"
                        ]
                    }
                }]
            },
            {
                test: /\.ejs$/,
                use: [{
                        loader: 'html-loader',
                        options: {
                            interpolate: 'require'
                        }
                    },
                    'ejs-html-loader'
                ]
            },
            {
                test: /\.(svg|png)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        publicPath: path.resolve(__dirname, '/assets/img'),
                        outputPath: 'assets/img',
                        filename: '[name].[ext]',
                        esModule: false
                    }
                }
            },
            {
                test: /\.(ttf|woff|woff2)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        publicPath: path.resolve(__dirname, '/assets/fonts'),
                        outputPath: 'assets/fonts',
                        filename: '[name].[ext]',
                        esModule: false
                    }
                }
            }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: 'src/views/pages/index.ejs',
            filename: 'index.html',
        }),
        new ExtractCssChunksPlugin({
            filename: 'assets/css/[name].css',
            chunkFilename: 'assets/css/[id].css',
        })
    ]
});

My scss files are imported in contact-modal.js and main.js, neither of the files are linked to each other.

Thank you