PostCSS not loading SCSS module dependencies

Hey stackers,

I am building a React app using Rails along with Webpacker which forces me to use PostCSS in order to load styles along with optional other loaders on top of it.

When importing an SCSS module from my packages like import '@material/react-button/index'; it seems like PostCSS doesn't load their respective dependency as it needs @material/base/mixins to load.

The file node_modules/@material/base/_mixins.scss is present in the node_modules folder. So I really can't figure out why it won't read or import the respective file.

Environment.js

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

module: {
  rules: [{
    test: /\.js(\.erb)?$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    options: {
      presets: [
        ['env', { modules: false }]
      ]
    }
  },
  {
    test: /\.scss$/,
    use: extractSCSS.extract({
      use: [
      { loader: 'style-loader', options: { sourceMap: true } },
      { loader: 'css-loader', 
          options: { 
            sourceMap: true,
            importLoaders: 2 
          } 
      },
      { loader: 'postcss-loader', options: { sourceMap: true } },
      { loader: 'sass-loader', 
          options: { 
            sourceMap: true, 
            includePaths: ["node_modules"]
          }
      }]
    })
  }]
}

module.exports = environment

Error Log

10:53:42 webpacker.1 | ERROR in ./node_modules/css-loader??ref--2-1!./node_modules/postcss-loader/lib??ref--2-2!./node_modules/sass-loader/lib/loader.js??ref--2-3!./node_modules/@material/react-button/index.scss
10:53:42 webpacker.1 | Module build failed:
10:53:42 webpacker.1 | @import "@material/base/mixins";
10:53:42 webpacker.1 | ^
10:53:42 webpacker.1 |       File to import not found or unreadable: @material/base/mixins.
10:53:42 webpacker.1 |       in /Users/remy/projects/kmpgny-sked-rails/node_modules/@material/ripple/common.scss (line 17, column 1)
10:53:42 webpacker.1 | Error:
10:53:42 webpacker.1 | @import "@material/base/mixins";
10:53:42 webpacker.1 | ^
10:53:42 webpacker.1 |       File to import not found or unreadable: @material/base/mixins.
10:53:42 webpacker.1 |       in /Users/remy/projects/kmpgny-sked-rails/node_modules/@material/ripple/common.scss (line 17, column 1)
10:53:42 webpacker.1 |     at options.error (/Users/remy/projects/kmpgny-sked-rails/node_modules/node-sass/lib/index.js:291:26)
10:53:42 webpacker.1 |  @ ./node_modules/@material/react-button/index.scss 2:14-161 21:1-42:3 22:19-166
10:53:42 webpacker.1 |  @ ./app/javascript/sked-app/components/App.jsx
10:53:42 webpacker.1 |  @ multi (webpack)-dev-server/client?http://localhost:3035 webpack/hot/dev-server ./app/javascript/sked-app/components/App.jsx
10:53:42 webpacker.1 | webpack: Failed to compile.