包裹导入安装到node_modules的material-components-web scss文件不起作用答案

【问题标题】：Parcel importing material-components-web scss files installed to node_modules not working包裹导入安装到node_modules的material-components-web scss文件不起作用
【发布时间】：2020-08-10 06:44:54
【问题描述】：

我已经按照here 的指示安装了material-selected，通过运行以下命令：

npm install @material/select

我已经包含了用于选择的 html 并设置了它的宽度。在我的sass 文件中，我导入了文档中建议的材质样式：

@use "@material/list/mdc-list";
@use "@material/menu-surface/mdc-menu-surface";
@use "@material/menu/mdc-menu";
@use "@material/select/mdc-select";

但是，当我尝试使用 parcel 构建项目时，出现错误：

Can't find stylesheet to import.

@use "@material/list/mdc-list";
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

src/scss/app.scss 1:1  root stylesheet

我应该如何导入这些样式表？我也尝试过使用波浪号运算符：

@use "~@material/list/mdc-list";
@use "~@material/menu-surface/mdc-menu-surface";
@use "~@material/menu/mdc-menu";
@use "~@material/select/mdc-select";

但是，这也无济于事，然后我得到了::

  @use "@material/density/functions" as density-functions;
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  node_modules/@material/list/_mixins.scss 22:1 @use
  node_modules/@material/list/mdc-list.scss 21:1 @use
  src/scss/app.scss 1:1 root stylesheet
  Error: Can't find stylesheet to import.

  @use "@material/density/functions" as density-functions;
  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  node_modules/@material/list/_mixins.scss 22:1   @use
  node_modules/@material/list/mdc-list.scss 21:1  @use
  src/scss/app.scss 1:1                           root stylesheet

同样在我的 vs 代码编辑器中，我收到 @use 是未知规则的警告：

 Unknown at rule @usescss(unknownAtRules)

我不知道为什么会这样。

【问题讨论】：

你搞清楚了吗？我有同样的问题。
不，不幸的是我仍然有同样的问题

标签： sass parceljs material-components-web

【解决方案1】：

使用 Parcel bundler 时，您还需要提供导入路径配置。有关如何配置 Sass 的更多详细信息，请参阅Parcel docs。

将.sassrc.js 文件添加到您的项目根文件夹并包含以下行：

const path = require('path')

const CWD = process.cwd()

module.exports = {
  "includePaths": [
    path.resolve(CWD, 'node_modules'),
    path.resolve(CWD, 'src')
  ]
}

这是 Glitch 上的 full example。

【讨论】：