How to @import external SCSS properly with webpack and Vue.js?

Question

As in Material Component Web's example, I want to be able to import SCSS from my node_modules like this:

@import '@material/elevation/mdc-elevation';

However, I'm getting this error message when trying to run the webpack build:

File to import not found or unreadable: @material/elevation/mdc-elevation.

@import './~/@material/elevation/mdc-elevation.scss'; doesn't work either.

I'm pretty sure the issue is somewhere in my webpack config, but I can't figure out where.

What did they do in Material Components Web's Vue.js example in order to make it work?

Here's my npm-debug.log in case you need it. And here's the corresponding Git repository: sk22/spg-tinf-sem03/proj01

Thanks in advance!

Edit: I want to be able to import the scss files, not the compiled css.

@sobolevn That doesn't work either. However, the example linked imports it using @material/elevation/mdc-elevation, so that should also work somehow. — sk22
Have a look at this simple example: github.com/wemake-services/vue-material-button/blob/master/src/… — sobolevn
There it is: github.com/material-components/material-components-web/blob/… — Hashem Qolami
@HashemQolami I've already added this (as a webpack 2 rule option) to my config, since the linked example uses webpack 1. I've also tried to add the sassLoader object, but it also didn't work. — sk22

sk22 sk22 · Accepted Answer · 2016-12-29T16:34:38

Got it.

here's a part of my webpack 2 config's module.rules:

{
  test: /\.(sass|scss)$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        includePaths: [path.resolve(__dirname, 'node_modules')],
      },
    },
  ],
},

So what did I do wrong? My options object was placed in the rule directly, not the loader.

The old webpack config rule looked like this:

{
  test: /\.(sass|scss)$/,
  use: ['style-loader', 'css-loader', 'sass-loader'],
  options: { includePaths: [path.resolve(__dirname, './node_modules')] },
},

See the difference? Instead of the 'sass-loader' string, I extended it to an object, containing the loader name and the options object, because the options only apply to the sass-loader.

(You could also drop the path.resolve and only write 'node_modules', but it might be safer to leave it.)

Check out this documentation page for further information. https://webpack.js.org/configuration/module/#rule-use

Without that loader, you must prefix each import with a ~, which webpack converts to the node_modules folder, at least with my previous configuration. But this will break 3rd party SCSS frameworks like Material Components Web, because they use @import statements without a leading ~ themselves, for example here.

Inside .vue files

This will not work in .vue files, as vue-loader just uses sass-loader without any options by default. So if you want that to work, you probably need to make use of vue-loader's own options, as described in its documentation.

(I'm unable to get it to work for some reason I don't know...)

How to @import external SCSS properly with webpack and Vue.js?

2 Answers