Сборка модуля не удалась (из ./node_modules/sass-loader/dist/cjs.js): Реагировать на приложение с помощью конфигурации веб-пакета

Question

Я работаю над приложением реагировать на js с файлом конфигурации Webpack.Здесь я пытаюсь переопределить переменную начальной загрузки с пользовательской.Но я получаю много "Переменная является неопределенной ошибкой".Я следовал документации по интеграции Bootstrap Webpack, вот ссылка :: https://getbootstrap.com/docs/4.1/getting-started/webpack/

Я получаю эту ошибку ::

Сборка модуля не удалась (с ./node_modules/sass-loader / dist / cjs.js): SassError: аргумент $color из darken($color, $amount) должен быть цветом в строке 172 файла src / assets / scss / _bootstrap-override.scss, в функции darken из строки 172 строки src /assets / scss / _bootstrap-override.scss

Моя структура папок выглядит следующим образом :: корневой каталог ::

-src -> assets -> scss

Теперь папка Sass содержит мои пользовательские файлы sass и файл _style.scss.У меня есть импорт переменных полной загрузки в этом и пытается переопределить файл с пользовательскими переменными.

_style.scss

$body-color:#000;
body{
    background-color: $body-color;
}
@import 'bootstrap-override.scss';
@import '~bootstrap/scss/bootstrap.scss';

После того, как я импортировал этот файл в index.js

my webpack.config.js

/**
 * Webpack Config
 */
const path = require('path');
const fs = require('fs');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');

const publicPath = '/';

// Make sure any symlinks in the project folder are resolved:
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);

// plugins
const autoprefixer = require('autoprefixer');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: ["babel-polyfill", "react-hot-loader/patch", "./src/index.js"],
    output: {
        path: resolveApp('dist'),
        filename: 'static/js/[name].[hash:8].js',
        publicPath: publicPath,
        // hotUpdateChunkFilename: 'hot/hot-update.js',
        // hotUpdateMainFilename: 'hot/hot-update.json',
        // hotUpdateChunkFilename: '[id].[hash].hot-update.js',
        // hotUpdateMainFilename: '[hash].hot-update.json'
        // hotUpdateChunkFilename: (chunkData) => {
        //  return `${chunkData.chunk.name === 'main' ? '' : '[name]/'}[id].[hash].hot-update.js`;
        // },
        // hotUpdateMainFilename: '[hash].hot-update.json'
    },
    devServer: {
        contentBase: './src/index.js',
        host: '0.0.0.0',
        compress: true,
        port: 3000, // port number
        historyApiFallback: true,
        quiet: true
    },
    // resolve alias (Absolute paths)
    resolve: {
        alias: {
            Actions: path.resolve(__dirname, 'src/actions/'),
            Components: path.resolve(__dirname, 'src/components/'),
            Assets: path.resolve(__dirname, 'src/assets/'),
            Routes: path.resolve(__dirname, 'src/routes/'),
            Constants: path.resolve(__dirname, 'src/constants/'),
            Helpers: path.resolve(__dirname, 'src/helpers/'),
            Api: path.resolve(__dirname, 'src/api/')
        }
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10000,
                            name: 'static/media/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.(woff|woff2|eot|ttf|svg)$/,
                loader: 'url-loader?limit=100000'
            },
            // Scss compiler
            {
                test: /\.(scss)$/,
                use: [{
                    loader: 'style-loader', // inject CSS to page
                }, {
                    loader: 'css-loader', // translates CSS into CommonJS modules
                }, {
                    loader: 'postcss-loader', // Run post css actions
                    options: {
                        plugins: function () { // post css plugins, can be exported to postcss.config.js
                            return [
                                // require('precss'),
                                require('autoprefixer')
                            ];
                        }
                    }
                }, {
                    loader: 'sass-loader' // compiles Sass to CSS
                }]

            }
        ]
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    parse: {
                        ecma: 8,
                    },
                    compress: {
                        ecma: 5,
                        warnings: false,
                        // Disabled because of an issue with Uglify breaking seemingly valid code:
                        // https://github.com/facebook/create-react-app/issues/2376
                        // Pending further investigation:
                        // https://github.com/mishoo/UglifyJS2/issues/2011
                        comparisons: false,
                    },
                    mangle: {
                        safari10: true,
                    },
                    output: {
                        ecma: 5,
                        comments: false,
                        // Turned on because emoji and regex is not minified properly using default
                        // https://github.com/facebook/create-react-app/issues/2488
                        ascii_only: true,
                    },
                },
                // Use multi-process parallel running to improve the build speed
                // Default number of concurrent runs: os.cpus().length - 1
                parallel: true,
                // Enable file caching
                cache: true,
                sourceMap: true
            })
        ]
    },
    performance: {
        hints: process.env.NODE_ENV === 'production' ? "warning" : false
    },
    plugins: [
        new FriendlyErrorsWebpackPlugin(),
        new CleanWebpackPlugin({
            dry: false,
            verbose: false,
        }),
        new HtmlWebPackPlugin({
            template: "./public/index.html",
            filename: "./index.html",
            favicon: './public/favicon.ico'
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "static/css/[name].[hash:8].css"
        })
        // new BundleAnalyzerPlugin()
    ]
};

Мой package.json, зависимости dev :::

"devDependencies": {
        "@babel/cli": "^7.6.2",
        "@babel/core": "^7.6.2",
        "@babel/node": "^7.6.2",
        "@babel/plugin-proposal-class-properties": "^7.5.5",
        "@babel/preset-env": "^7.6.2",
        "@babel/preset-react": "^7.0.0",
        "@babel/register": "^7.6.2",
        "autoprefixer": "^9.6.1",
        "babel-loader": "^8.0.6",
        "clean-webpack-plugin": "^3.0.0",
        "css-loader": "^3.2.0",
        "friendly-errors-webpack-plugin": "^1.7.0",
        "html-loader": "^0.5.5",
        "html-webpack-plugin": "^3.2.0",
        "html-webpack-template": "^6.2.0",
        "mini-css-extract-plugin": "^0.8.0",
        "node-sass": "^4.12.0",
        "postcss-loader": "^3.0.0",
        "sass-loader": "^8.0.0",
        "style-loader": "^1.0.0",
        "uglifyjs-webpack-plugin": "^2.2.0",
        "url-loader": "^2.1.0",
        "webpack": "^4.41.0",
        "webpack-cli": "^3.3.9",
        "webpack-dev-server": "^3.8.1"
    }

Я использую "react": "^16.9.0",

Пожалуйста, предложите чтоя должен сделать, чтобы избавиться от него.