CSS @导入 "~materlize-css"|使用 Webpack |没有制作风格

Question

我正在使用 Sage，一个 WordPress 框架，它允许您在创建过程中选择一些 css 框架，但我想改用 Materialize CSS。

它使用 Webpack 构建并将 .scss 文件合并为一个文件。我做了一个 npm install materialize-css，所以它在我的 node_modules 中。在我的元素结构中，我制作了一个基本上用于导入模块的 scss 文件。

我在这个版本中也有 bulma，通过原始创建包含在内，所以我可以尝试查看结构是如何设置的。它使用以下导入语句:

@import "~bulma";

这行得通。我很困惑这是如何工作的。我认为 ~(代字号)告诉 Webpack 一些东西，但我不知道是什么。我认为 Webpacks 检查 package.json 文件或其他文件并在 node_modules 中找到它。

我试过 @import "~materialize-css"; 但没有成功。

有人能解释一下 Webpack 到底在做什么吗？哈哈，因为我找不到这方面的任何文档。

下面是node_module的文件夹结构，可能与此有关:

也许 Bulma 的根是 bulma.sass 但对于 Materialize-CSS，没有文件，它在 sass/materialize.scss 中。

如果需要，这里是 Sage 框架的 github，webpack.config.js 位于 build 文件夹中:https://github.com/roots/sage/tree/master/resources/assets

Answer 1

您还必须像这样指定要导入的文件

@import "~bootstrap/scss/bootstrap";
@import "~font-awesome/scss/font-awesome";
@import "~toastr/toastr";