Сбой сборки модуля из Sass-Loader при настройке комплекта пользовательского интерфейса материала React

Моя среда У меня настроено приложение RoR с React Native. Я использую сервер rails и веб-пакет для своей среды разработки.

попытка добавить библиотеку пользовательского интерфейса Я добавил файлы пользовательского интерфейса материалов в соответствии с требованиями docs в мое приложение ReactJS.

Моя проблема При запуске моего приложения после добавления файлов Material UI в мою корневую папку ReactJS

Я получаю следующую ошибку при компиляции:

Настройки Resolve-url-loader неверны в соответствии с этой ошибкой

WARNING in ./app/javascript/components/assets/scss/material-kit-react.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/resolve-url-loader??ref--7-3!./node_modules/sass-loader/lib/loader.js??ref--7-4!./app/javascript/components/assets/scss/material-kit-react.scss)
Module Warning (from ./node_modules/resolve-url-loader/index.js):
resolve-url-loader: loader misconfiguration
  "attempts" option is defunct (consider "join" option if search is needed)

Ошибка как эффект домино из-за неправильных настроек разрешения-url-загрузчика, ссылаясь на то, что sass/scss не работает.

ERROR in ./app/javascript/components/assets/scss/plugins/_plugin-react-datetime.scss (./node_modules/css-loader/dist/cjs.js??ref--7-1!./node_modules/postcss-loader/src??ref--7-2!./node_modules/resolve-url-loader??ref--7-3!./node_modules/sass-loader/lib/loader.js??ref--7-4!./app/javascript/components/assets/scss/plugins/_plugin-react-datetime.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

  border-color: $white-color !important;
               ^
      Undefined variable: "$white-color".
      in /home/ubuntu/workspace/backend/app/javascript/components/assets/scss/plugins/_plugin-react-datetime.scss (line 116, column 17)

Я попытался добавить следующие библиотеки узлов в свое приложение.

"devDependencies": {
    "css-loader": "^2.1.1",
    "mini-css-extract-plugin": "^0.6.0",
    "node-sass": "^4.11.0",
    "resolve-url-loader": "^3.1.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  }

создал и настроил webpack.config.js в моей основной корневой папке

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

module.exports = {
  entry: './src/styles.scss',

  mode: 'development',

  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        include: [
          path.resolve(__dirname, './static/img'),
        ],
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]-[hash].[ext]',
          },
        },
      },
      {
        test: /\.svg$/,
        use: {
          loader: 'svg-inline-loader',
          options: {
            name: '[name]-[hash].[ext]',
          },
        },
      },
      {test: /\/src\/js\/(?:.*)\.css$/, use: [{loader: 'style-loader'}, {loader: 'css-loader'}]},
      {
        test: [/\.scss$/, /\.sass$/],
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'resolve-url-loader',
            options: {
              debug: true,
              root: path.join(__dirname, './static/img'),
              includeRoot: true,
              absolute: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              outputStyle: 'compressed',
              sourceMap: true,
              includePaths: [
                './app/javascript/components/assets/scss',
              ],
            },
          },
        ],
      },
    ],
  },

  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/app/javascript/components/assets/scss',
  },

  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: '[name]-[chunkhash].css',
      chunkFilename: '[name]-[chunkhash].css', // Ensure each chunk has a unique id
    }),
  ],

  devtool: 'source-map'
};

добавлен загрузчик sass в файл environment.js

./config/webpack/environment.js

const { environment } = require('@rails/webpacker')

// resolve-url-loader must be used before sass-loader
environment.loaders.get('sass').use.splice(-1, 0, {
  loader: 'resolve-url-loader',
  options: {
    attempts: 1
  }
});

module.exports = environment

Я также пробовал npm rebuild node-sass

После моих попыток настроить webpack и resolve-url-loader я все еще не могу заставить его работать. Я прочитал их соответствующие документы, другие вопросы и решения, но даже в собственном документе resolve-url-loader говорится, что его сложно настроить.

Я ожидаю, что смогу компилировать и обрабатывать файлы scss/sass в папке моего приложения.

текущая структура папок

./ (root folder)
  ./Webpack.config.js
  ./Config/webpack/environment
  ./App/javascript ( root folder react app)

пожалуйста, спросите меня, если вам нужна дополнительная информация