Why doesn't less or sass compile in webpack?

Question

webpack

Example from the doc

module: {
        rules: [{
            test: /\.scss$/,
            use: [{
                loader: "style-loader"
            }, {
                loader: "css-loader"
            }, {
                loader: "sass-loader",
                options: {
                    includePaths: ["absolute/path/a", "absolute/path/b"]
                }
            }]
        }]
    }

a - where from
b - where
- I understand
my piece

module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: {
                    presets: ["babel-preset-react-native"],
                    cacheDirectory: true
                }
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            }, {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "sass-loader",
                    options: {
                        includePaths: ["./app/styles/style.scss", "./public/css/style.css"]
                    }
                }]
            },
            {
                test: /\.(png|jpg|svg|gif|ttf|eot|woff|woff2)$/,
                use: "file?name=[path][name].[ext]",
            }
        ]
    },

It runs without errors, but there is no result in /public/css/style.css.
Less also swears

// 
ERROR in ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js??ref--2-2!./app/styles/style.less


                test: /\.less$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "less-loader", options: {
                        strictMath: true,
                        noIeCompat: true
                    }
                }]

What could be the reason?
____
This is how sass works

},  {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "sass-loader" // compiles Sass to CSS
                }]
            },

Can someone tell me what's wrong with the paths in sass and the old one in less?

Answer 1

You all misunderstood.
An array of paths that LibSass can look in to attempt to resolve your \@import declarations. When using data, it is recommended that you use this
"./public/css/style.css" - does not exist, so he swears.
In order to generate style files, you need to use ExtractTextPlugin .