Nuxt Sass/Scss @imports 在导入的 node_modules 中答案

【问题标题】：Nuxt Sass/Scss @imports inside imported node_modulesNuxt Sass/Scss @imports 在导入的 node_modules 中
【发布时间】：2019-10-30 08:50:49
【问题描述】：

我正在尝试在我的 Nuxt 项目中使用 Material design 官方库的 Sass 部分。

我在 assets 文件夹中创建了一个名为 styles.scss 的文件，并尝试导入一个像这样的简单组件：

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

但是它向我显示了这个错误：

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.

显然这是因为导入名称中没有~，所以 Nuxt 不知道在哪里可以找到它...

有谁知道我该如何解决这个问题？使用 node-sass，我使用了--include-path 来解决这个问题，但我在 nuxt 中没有发现任何类似的东西......

提前致谢！

【问题讨论】：

标签： sass node-modules nuxt.js

【解决方案1】：

我通过将以下代码添加到nuxt.config.js 找到了解决问题的方法：

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

我不知道这是否是最好的解决方案，但我的 scss 中不需要任何 ~，它会自动在 node_modules 中搜索，这很好。

【讨论】：