vueでmaterializecssのsass変数を上書きする方法は？

Question

具体化の変数を_variables.scssで変更したいと思います。私のVueの2 main.jsで

$primary-color: color("materialize-red", "lighten-2") !default; 
$primary-color-light: lighten($primary-color, 15%) !default; 
$primary-color-dark: darken($primary-color, 15%) !default; 
/*...*/ 

私は私が実体化を含む前に私の_variables.scssを含める必要があるが、私は方法がわからないと思いますので!defaultのこの

require('materialize-css/sass/materialize.scss'); 

のようなスタイルを具現含まれています。

自分の変数を設定する適切な方法は何ですか。 $primary-color: color("blue", "lighten-2")（私は、マテリアライズ_colors.scssの定義済みのパレットを使用します）？

EDIT 1：私はvue-cli

EDIT 2でvue2をインストール：

フォルダ構造：

├── build/ 
├── config/ 
├── dist/ 
├── node_modules/ 
│ ├── materialize-css 
├── src/ 
│ ├── components 
│ ├── router 
│ └── main.js 
├── package.json 
└── index.html 

Answer 1

マテリアライズドCSSのデフォルト設定を変更する前に。最初に、設定を変更するコンポーネントをインポートする必要があります。この後、デフォルト設定を上書きして、マテリアライズをインポートする必要があります。たとえば、あなたは、次のコード記述し、デフォルトの色を変更する例app.scss用のファイルを作成する場合：

//please put the paths as per yours project directory structure 
@import "materialize-css/sass/components/color"; 
$primary-color: color("blue", "lighten-2") !default; 
@import 'materialize-css/sass/materialize'  

注：app.cssは、あなたのページに含まれている必要があります。私の例のapp.cssあたりとして、あなたはrepo githubのマテリアライズド require('../app.scss');

訪問の公式としてVueの2にapp.scssまたはapp.cssをロードすることができたindex.html今

のと同じレベルで、プロジェクトのルートフォルダのIEでなければなりません完全なソースを表示する。

Answer 2

実体-CSSをカスタマイズするには、CSSのソースを具体ダウンロードする必要が（Sass版）materializecssから。これにはソース.scssファイルが含まれます。抽出されたソースにはsassという名前のフォルダがあります。このフォルダにはmaterialize.scssというファイルがあります。これはソースファイルであり、実際のマテリアライズCSSを生成します。あなたはmaterialize.scssファイルが存在するフォルダ内のソースと実行、次のコマンドで_variables.scssを変更することができます。

sass materialize.scss materialize.css 

これは、あなたのvue.jsコード内で使用することができますmaterialize.cssを、生成されます。詳細はhereです。

---

ない正確に関連しますが、this questionはvue.js.で使用するブートストラップをカスタマイズするために同様のアプローチを使用しています