Nuxt Sass/Scss @imports inside imported node_modules

Question

I'm trying to use the Sass parts of Material design official library inside my Nuxt project.

I have created a file inside assets folder called styles.scss and tried to import a simple component like this :

@import "~@material/textfield/icon/mdc-text-field-icon";

However it's displaying me this error :

ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import "@material/theme/variables";
^
      File to import not found or unreadable: @material/theme/variables.

Obviously it's because there is no ~ inside the import name so Nuxt doesn't know where to find it...

Does anyone know how i can solve this ? With node-sass, i used the --include-path to solve this issue but i didn't found anything similar in nuxt...

Thanks in advance !

score 0 · Answer 1 · answered Jun 16 '19 at 17:18

I found the way to solve my problem by adding the following code to nuxt.config.js :

build: {
  extend(config, context) {
    config.module.rules.push({
      test: /\.(sass|scss)$/,
      use: {
        loader: "sass-loader",
        options: {
          includePaths: ["./node_modules"]
        }
      }
    })
  }
}

I don't know if it's the best solution but i don't need any ~ inside my scss, it automatically search inside the node_modules, which is nice.

Nuxt Sass/Scss @imports inside imported node_modules

1 Answers1