title: Module build failed from Sass-Loader when setting up Material UI kit React
body: <p><strong>My environment</strong>
  I've got an RoR app setup with React Native. I use rails server and webpack for my development environment.</p>
  
  <p><strong>attempt to add UI library</strong>
  I added the material ui files as required in the <a href="https://demos.creative-tim.com/material-kit-react/?_ga=2.208268241.2109903711.1555672452-489722304.1555487773#/documentation/tutorial" rel="nofollow noreferrer">docs</a> to my ReactJS app.</p>
  
  <p><strong>My problem</strong>
  When running my application after adding the Material UI files to my root ReactJS folder</p>
  
  <p>I get the following error when compiling: </p>
  
  <p>Resolve-url-loader settings are incorrect according this error</p>
  
  <pre><code>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)
  </code></pre>
  
  <p>Error as domino effect from the incorrect resolve-url-loader settings, citing that sass/scss doesn't work. </p>
  
  <pre><code>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)
  </code></pre>
  
  <p>I've tried adding the following node libraries to my app</p>
  
  <pre><code>
  "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"
    }
  
  </code></pre>
  
  <p>created and configuration a <strong>webpack.config.js</strong> in my main root folder </p>
  
  <pre><code>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'
  };
  </code></pre>
  
  <p>added sass loader to environment.js file </p>
  
  <p><strong>./config/webpack/environment.js</strong></p>
  
  <pre><code>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
  
  </code></pre>
  
  <p>I've also tried <code>npm rebuild node-sass</code></p>
  
  <p>After my attempts to configure webpack and resolve-url-loader I still can't get it to work. I've read trough their respective documents, other questions and solutions, but even resolve-url-loader's own document says that it's difficult to configure. </p>
  
  <p>I expect to be able to compile and process scss/sass files in my app folder</p>
  
  <p>current folder structure </p>
  
  <pre><code>./ (root folder)
    ./Webpack.config.js
    ./Config/webpack/environment
    ./App/javascript ( root folder react app)
  </code></pre>
  
  <p>please ask me if you need any more information</p>