更改Meteorjs中的默认materializecss颜色

Question

在官方site：

  

使用Sass时，您可以更改站点的配色方案   非常快。以下是您可以更改的非常小的示例   通过_variables.scss中的sass。

但是如何更改materialize的materialize（materializecss.com）包的默认颜色？

Answer 1

最简单的事情就是安装 https://github.com/fourseven/meteor-scss使用meteor add fourseven:scss作为一个包。

然后将来自http://materializecss.com/getting-started.html的源.scss版本添加到您应用中的/ client文件夹中，您可以在其中更改._variables.scss中的变量。

Meteor和fourseven:scss包将为您编译scss和javascript。

希望这有帮助！

Answer 2

meteor的官方物化包不包含SASS源文件，因此您必须创建一个包以利用SASS文件或只是链接实现方式。还有一个包含SASS源的包，以及如何覆盖颜色和不包含颜色的说明。 https://atmospherejs.com/grigio/materialize-sass。祝你好运！

Answer 3

在做了一些研究后，我发现这已经在github上进行了讨论。

可以通过1）添加流星scss版本来完成; 2）将其导入scss文件。

$ meteor add fourseven:scss
$ meteor add poetic:materialize-scss
$ meteor remove materialize:materialize # if you have materialize installed

您应将此代码放在 client / styles / app.scss 中：

@import ".meteor/local/build/programs/server/assets/packages/poetic_materialize-scss/bower_components/materialize/sass/components/_color.scss";
@import "client/styles/variables.scss";
@import ".meteor/local/build/programs/server/assets/packages/poetic_materialize-scss/bower_components/materialize/sass/materialize.scss";

<强>的客户机/风格/ variables.scss

$primary-color-dark:   #846C63;
$primary-color:        #4CAF50;
$primary-color-light:  #C8E6C9;
$primary-color-text:   #FFFFFF;
$accent-color:         #388E3C;
$primary-text-color:   #212121;
$secondary-text-color: #727272;
$divider-color:        #B6B6B6;

（显然有机会调色板;-)）

来源：https://github.com/poetic/meteor-materialize-sass/issues/1

Answer 4

我找到了编辑materialize:materialize包SASS变量的解决方法。

1. 使用meteor add materialize:materialize
安装
2. 从http://materializecss.com/bin/materialize-src-v0.97.7.zip
下载SASS包文件
3. 仅在您的/client文件夹中放置 CSS文件。见下图：



1. 修改/component目录中的任何样式，您会在视图中看到这些样式。

  

注意：您不必导入任何javascript文件。 materialize:materialize包将为您处理。