在 Meteorjs 中更改默认的 materializecss 颜色

Question

在官方site:

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

但是如何更改 materialize:materialize (materializecss.com) 包的默认颜色？

Answer 1

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

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

4. 编辑/component 目录中的任何样式，您都会在视图中看到这一点。

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

Answer 2

在做了一些研究之后，我认为这已经在 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";

client/styles/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 3

最简单的方法是安装 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 4

流星的官方物化包不包含 SASS 源文件，因此您要么必须创建一个包来使用 SASS 文件，要么只需链接物化 ole 时尚的方式。还有一个包，其中包含 SASS 源代码和有关如何覆盖颜色以及不覆盖颜色的说明。 https://atmospherejs.com/grigio/materialize-sass。祝你好运！