css - Meteorjs でデフォルトの materializecss の色を変更する

Question

その公式サイトで：

Sass を使用すると、サイトの配色を非常にすばやく変更できます。以下は、_variables.scss で sass を介して変更できる内容の非常に小さなサンプルです。

しかし、流星の materialize:materialize (materializecss.com) パッケージのデフォルトの色を変更するにはどうすればよいですか?

Answer 1

最も簡単な方法は、 https://github.com/fourseven/meteor-scssを使用してパッケージとしてインストールすること meteor add fourseven:scssです。

次に、ソース .scss バージョンをhttp://materializecss.com/getting-started.htmlからアプリの /client フォルダーに追加します。ここで、._variables.scss の変数を変更できます。

Meteor とfourseven:scssパッケージは、scss と javascript をコンパイルします。

お役に立てれば！

Answer 2

meteor の公式マテリアライズ パッケージには SASS ソース ファイルが含まれていないため、SASS ファイルを利用するパッケージを作成するか、従来の方法でマテリアライズする必要があります。また、SASS ソースと、色をオーバーライドする方法とオーバーライドしない方法に関する指示を含むパッケージもあります。https://atmospherejs.com/grigio/materialize-sass . 幸運を！

Answer 3

いくつかの調査を行った後、これは github で既に議論されていると考えました。

1) meteor 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