2

stylesheets/bootstrapディレクトリには次のものがあります。

私が持っている_variables.scss：

$black:                 #000 !default;
$grayDark:              #333 !default;
...
$textColor:             $grayDark !default;

このファイルは、 bootstrap.scssファイルにインポートされます。

// Core variables and mixins
@import "bootstrap/variables"; // Modify this for custom colors, font-sizes, etc
@import "bootstrap/mixins";
...

stylesheetsディレクトリには、bootstrap_include.scssがあります。

@import "bootstrap/bootstrap";
@import "bootstrap/responsive";

デフォルトのテキストを黒にオーバーライドしたいので、カスタム変数ファイルを作成し、それをカスタム ブートストラップ ファイルにインポートします。

_variables_custom.scss: 

$black:                 #000 !default;
$textColor:             $black !default;

次に、bootstrap_custom.scssで

@import "variables_custom";

最後に、application.css.scssで

*= require bootstrap_custom
*= require bootstrap_include

ページを更新すると、bootstrap_custom は常に空です。私は CSS 初心者ですが、なぜ機能しないのですか?

ありがとう

これが良いかどうかはわかりませんが、次を使用して解決しました：

私のbootstrap_customが含まれるようになりました

$black:                 #000 !default;
$textColor:             $black !default;
@import "bootstrap/bootstrap";
@import "bootstrap/responsive";

そして私のapplication.css.scssには今だけが含まれています

*= require bootstrap_custom
4

2 に答える 2

1

変数について話している間、CSS に関連するものは何もありません。この場合、変数は CSS プリプロセッサ ツールである SASS/Compass によって使用され、Rails によって使用され、CSS をより簡単に使用できるようになります (たとえば、変数を使用することによって)。

そのため、変数をファイルに挿入して単独で処理させると、有効な CSS 属性で then を使用しない限り、CSS コードは生成されません。

テストしたい場合は、bootstrap_custom.css に次のように追加します。

body {
  background-color: $black;
}

$black 変数が使用されていることがわかります。

于 2013-07-13T17:56:31.473 に答える