Question

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

我已经在资产文件夹中创建了一个名为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中没有发现类似的东西。

谢谢！

Answer 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内部搜索，这很好。

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

1 个答案: