2017-07-09 11 views
1

私はlaravelをインストールしています。私はsassとbootstrapの使い方を理解していません。私たちは、リソースフォルダに取得サスとブートストラップを統合するには?

"/reosources/sass/app.scss" このコンテンツ:

@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600"); 

@import "variables"; 

@import "node_modules/bootstrap-sass/assets/stylesheet/bootstrap" 

は、パブリック/ CSS/app.cssは、ブートストラップのスタイルを持っています。

ウェルカムビューでは、ブートストラップクラスを使用できます。しかし、今はブートストラップで草を使用する方法は?例えば、私のようないくつかの変数を定義する場合:

$background-white #fff; 
$background-red: red; 

をブートストラップHTMLにこの変数を適用し、私は_variable.scssでこの変数を定義する必要がありますか?そして、私はapp.cssで変更する必要がある変数を使用する?私はこれをしようとしているが、色は適用されません。それが動作していない

body{ 
font-family:"Helvetica Neue", 
Helvetica,Arial, 
sans-serif; 
font-size:14px; 
line-height:1.42857143; 
color:#333; 
background-color:$background-red} 

、背景が赤に変更いけない:私は変更する場合

body{ 
font-family:"Helvetica Neue", 
Helvetica,Arial, 
sans-serif; 
font-size:14px; 
line-height:1.42857143; 
color:#333; 
background-color:#fff} 

:app.cssでは、私は、ブートストラップ体内この中で、例えば、置きます。この仕組みがどのように理解できるか教えてください。ありがとう!

+0

あなたのlaravelインストールのルートで "npm install"を実行し、gulpを呼び出してjsとcssファイルを更新する必要があります。 –

答えて

0

あなたはLaravelミックスdocumentationあなたはNPMパッケージをインストールすることで起動する必要があり

を読む必要があります。コマンドラインでnpm installを実行します。 _variable.scssファイルを編集します。次にnpm run devを実行して、新しい変更を行うpublic/css/app.cssをビルドします。

ブレードファイルでは、mix()ヘルパーを使用してapp.cssにリンクします。

`<link href="{{ mix('css/app.css') }}" rel="stylesheet">` 

npmがインストールされていることを確認してください。あなたがMacでHomebrewを実行している場合brew install npm

関連する問題