Webpack Material components

Question

When trying to import material components in my main scss file, i get the following error from webpack

Time: 426ms
                            Asset     Size  Chunks             Chunk Names
    ./public/dist/style-bundle.js  2.77 kB       0  [emitted]  main
       [0] ./public/scss/app.scss 292 bytes {0} [built] [failed] [1 error]

    ERROR in ./public/scss/app.scss
    Module build failed:
    @import "@material/button/mdc-button";
    ^
          File to import not found or unreadable: @material/button/mdc-button.
          in /home/r2d2/Desktop/Practice/Insta/node_modules/material-components-web/material-components-web.scss (line 17, column 1)
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! instagram@1.0.0 web: `webpack`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the instagram@1.0.0 web script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/r2d2/.npm/_logs/2018-04-13T09_05_24_696Z-debug.log

The main problem seems to be the button componenet. Here is the main scss file named app.scss

@import "../../node_modules/material-components-web/material-components-web";

.foo-button {
  @include mdc-button-ink-color(teal);
  @include mdc-states(teal);
}

What can i do to resolve this error, I just started using material components and cannot find any solution regarding this.

Answer 1

You can try to use ~

@import "~material-components-web/material-components-web/filename.scss";

Or you can make a alias to use when import

resolve: {
    extensions: ['', '.js', '.css', '.scss'],
    alias: {
        material: path.join(__dirname, '/node_modules/material-components-web/material-components-web/filename.scss')
    }
}
@import '~material',

See the comment in webpack community

Answer 2

So I figured it out. There is no need to provide the complete path through node_modules folder. Just importing the material-components-web does the trick!