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?

[matsp]

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.

[jsfeldman]

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.