时间戳

首页 > 解决方案 > CSS @import "~materlize-css" | 使用 Webpack | 没有制作风格

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

问题描述

我正在使用 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

标签： csswordpresswebpacksassmaterialize

解决方案

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

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

推荐阅读