Webpack - Oddzielny plik css dla każdego pliku scss po bundlowaniu

Cześć. Nie mogę od wielu godzin znaleźć odpowiedzi na pytanie - Jak ustawić config webpacka, by brał każdy plik scss z projeku i zapisywał po kompilacji jego odpowiednik w formacie css w tym samym folderze, w którym znajduje się plik scss. Dla każdego pliku scss oddzielny plik css. Na razie próbuję zrobić to na testowym projekcie. Przykład:

root
-- folder1
------ plik.scss
------ plik.css
-- folder2
------ plik2.scss
------ plik2.css

Tu config:

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

module.exports = {
    entry: './src/javascript/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '',
        filename: 'bundle.js'
    },
    mode: 'development',
    
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: "css-loader",
                    },
                    {
                        loader: "postcss-loader"
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            implementation: require("sass")
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            outputPath: 'images'
                        }
                    }
                ]
            },
            {
                test: /\.(woff|woff2|ttf|otf|eot)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            outputPath: 'fonts'
                        }
                    }
                ]
            }
        ]
    },
    
    plugins: [
        new MiniCssExtractPlugin({
            filename: "bundle.css"
        })
    ]
};

Ale webpack tak nie działa i działać nie może. Wydaje mi się że próbujesz użyć złego narzędzia do Twojego celu. Zadaniem webpacka jest przemielić cały projekt, tak żeby wypluć tylko minimalne pliki html,js,css które są niezbędne do uruchomienia aplikacji webowej.

Podstawowe pytanie, które umożliwi znalezienie odpowiedzi: Po co chcesz mieć pliki .css obok plików .scss w odpowiednich folderach? Do czego chcesz ich użyć?

Drzewiec napisał(a):

Nie wiem do czego to będzie potrzebne. Po prostu dostałem takie polecenie.

Cóż, polecenie jest bezsensowne.

Jaki sens miałoby tworzenie styli w preprocesorze, porządkowanie ich po katalogach, po to żeby je zmielić do css, ale nie do jednego zminifikowanego tylko każde osobno? Moim zdaniem to nie ma sensu. Może osoba która Ci to zleciła ma jakiś plan na dalszy "rozwój".

Ale odpowiadając na pytanie, webpackiem się tego nie da (albo będzie bardzo trudno) zrobić, bo webpack nie służy do takich rzeczy jak transformacja SCSS do CSS. Owszem, możesz wczytać w webpacku style w dowolnej formie używając "style-loader", w taki sposób że aplikacja będzie działać; ale to jest na potrzeby aplikacji w webpacku, a nie Twoje.

Także jeśli chcesz zamienić wszystkie pliki SCSS na CSS w Twoim projekcie to może po prostu użyj programu scss bezpośrednio?