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-elevatio         


        

Answer 1

EDIT: Webpack has a section on sass-loader now: https://webpack.js.org/loaders/sass-loader/ also mentioning includepaths.

I had the same issue with @material and Vue. I managed to resolve the problem without adjusting the use property directly.

Solution

Step 1: First create a default Vue 2.1 project using the CLI. Your file structure will have a ./build directory.

Step 2: Open the file 'utils' you will see a cssLoaders() function which returns an object/map for the languages vue-loader supports.

You will see both sass and scss in that map.

Step 3: Change the values of sass and scss to:

  sass:    generateLoaders('sass', {
    indentedSyntax: true,
    includePaths:   [path.resolve(__dirname, '../node_modules')]
  }),
    scss:    generateLoaders('sass', {
  includePaths: [path.resolve(__dirname, '../node_modules')]
}),

Step 4: Go to the .vue file you're using and change the lang attribute in your