[英]CSS @import “~materlize-css” | Using Webpack | No style being made
I'm using Sage, a WordPress framework, and it lets you choose during creation some css frameworks, but I want to use Materialize CSS instead. 我正在使用Sage,一个WordPress框架,它允许您在创建期间选择一些css框架,但我想使用Materialise CSS代替。
It uses Webpack to build and combine the .scss
files into one. 它使用的WebPack建立和合并
.scss
文件合并为一个。 I did an npm install materialize-css
so it's in my node_modules
. 我做了一个
npm install materialize-css
所以它在我的node_modules
。 In my project structure, I made an scss file that's used to import the module basically. 在我的项目结构中,我创建了一个scss文件,用于基本导入模块。
I also have bulma in this build, included via the original creation, so I can try to see how the structure is setup. 我也有这个版本中的bulma,包含在原始创建中,因此我可以尝试查看结构的设置方式。 It uses the following import statement:
它使用以下import语句:
@import "~bulma";
This works. 这有效。 I'm so confused about how this works.
我很困惑这是如何工作的。 I think the
~
(tilde) tells Webpack something, but I don't know what. 我认为
~
(代字号)告诉Webpack一些东西,但我不知道是什么。 What I figured is that Webpacks checks the package.json file or something and finds it in the node_modules. 我想通过Webpacks检查package.json文件或其他东西,并在node_modules中找到它。
I've tried @import "~materialize-css";
我试过
@import "~materialize-css";
with no luck. 没有运气。
Can someone explain what the heck Webpack is doing? 有人能解释一下Webpack正在做什么吗? Haha, because I can't find any documentation on this.
哈哈,因为我找不到任何关于此的文件。
Here are the node_module folder structures, maybe this has something to do with it: 这是node_module文件夹结构,也许这与它有关:
Perhaps the root of Bulma is bulma.sass
yet for Materialize-CSS, there's no file, it's in sass/materialize.scss
. 也许Bulma的根源是
bulma.sass
但是对于Materialise-CSS,没有文件,它在sass/materialize.scss
。
If needed, here's the github for the Sage framework, the webpack.config.js
is in the build folder: https://github.com/roots/sage/tree/master/resources/assets 如果需要,这里是Sage框架的github,
webpack.config.js
位于build文件夹中: https : //github.com/roots/sage/tree/master/resources/assets
You have to specific the file you want to import also like this 您必须像这样具体要导入的文件
@import "~bootstrap/scss/bootstrap";
@import "~font-awesome/scss/font-awesome";
@import "~toastr/toastr";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.