material-components-web: Error when import SCSS from node_modules

I am using Vue CLI webpack starter.

<style lang="scss">
@import '@material/checkbox/mdc-checkbox';
</style>

This gives me an error

in ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-563a1fd0","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Checkbox.vue
Module build failed: 
@import '@material/checkbox/mdc-checkbox';
^
      File to import not found or unreadable: @material/checkbox/mdc-checkbox.
Parent style sheet: stdin
      in /home/nman/Documents/WORK/frontend-dev/mdc-vue-integration/src/components/Checkbox.vue (line 72, column 1)
 @ ./~/vue-style-loader!./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-563a1fd0","scoped":false,"hasInlineConfig":false}!./~/sass-loader/lib/loader.js?{"sourceMap":false}!./~/vue-loader/lib/selector.js?type=styles&index=0!./src/components/Checkbox.vue 4:14-397 13:3-17:5 14:22-405
 @ ./src/components/Checkbox.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi ./build/dev-client ./src/main.js

What is happening? Why so hard to get started?

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 17 (6 by maintainers)

Most upvoted comments

Are you building for production or development? Are you extracting CSS in one file or inline it? How does your sourcecode look like? Your package.json? Questions over questions…

Because of that my opinion is that you should get a feeling of webpack without any starter - it is too much magic in the first time.

I will help you but please tear down the destructive mood, it is the mdc repo and not Webpack or Vuejs.

matsp on Aug 24, 2017

I ran into a similar problem and it took longer than I care to admit to figure out haha.

If you are using single page components and the new vue-cli, adding this to the vue.config.js should allow a style section set to a lang of scss to look for files in the node_modules folder without the tilda

// vue.config.js
const path = require('path')
const merge = require('webpack-merge')
...
chainWebpack: config => {
  config.module
    .rule('vue')
    .use('vue-loader')
    .tap(options =>
      merge(options, {
        loaders: {
          scss: [
            {
              loader: 'sass-loader',
              options: {
                sourceMap: false,
                includePaths: [path.resolve(__dirname, './node_modules')]
              }
            }
          ]
        }
      })
    )
}

I’m far from a webpack guru so if you have any corrections please let me know.

jsfeldman on Mar 8, 2018

…then you must now that using webpack is really hard, especially when there are 70% examples with webpack 1, vue-cli using webpack 2, and vue-loader doesn’t support webpack 3 fully yet 😄 I gone thought hell past 2 days with webpack. It’s almost impossible to learn.

Anyway, I got working solution thanks to one very kind guy from Vue Discord channel.

hackuun on Aug 25, 2017