Webpack sass-loader entry / output folder's

Question

This is my folder structure:

webpack.config.js
- sass
-- _partials.scss
-- style-1.scss
-- style-2.scss

And what I want that webpack to automatically detect the files into my sass folder and create css file with the same name, note that there are some sass partials files to:

webpack.config.js
- sass
-- _partials.scss
-- style-1.scss
-- style-2.scss
- css
-- style-1.css
-- style-2.css

I want to load specific css file with html link's tags. I dont know where to put the sass entry and css output folders according to my webpack config's file :

module.exports = {
    context: __dirname + '/js/react/entry',
    entry: {
        page1: './page1.js',
        page2: './page2.js',
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/js/react/build'
    },
    module: {
        rules: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['env', 'react']
                }
            },
            {
                test: /\.scss$/,
                use: [
                    "sass-loader"
                ]
            }
        ]
    }
};

Thanks for helping!

Answer 1

The way Webpack works is crawling your source from the entry points you define and then it builds your application from there. If you do not define those files as entry points, Webpack will not include them in your build... unless you have those files referenced from your .js files. That is what I would actually recommend you do: At the top of your .js files, import your relative .scss file. Once you do that, Webpack will see it and try to process it with your sass-loader.

Answer 2

Nope, I really want to get independant css files to load into link's html tags in other pages.

According to the doc of sass-loader, sass-loader is based of node-sass. I want the result like the simplest node-sass command in my webpack:

node-sass sass -o css