ブートストラップローダーを使用するAngular2プロジェクトでブートストラップsass変数をオーバーライドするにはどうすればよいですか?

Weblurk

多くのスレッドが示唆しているように、私はブートストラップの前に変数を含めようとしましたが、運がありませんでした。

たとえば、ブートストラップの最大画面ブレークポイントの幅を次のように変更したい 1980px

app.component.tsはこのように見えます:

@import './src/app/shared/styles/_variables'; // My own variables
@import '~bootstrap-sass/assets/stylesheets/bootstrap/_variables';

そのリストの最初のファイルは./src/app/shared/styles/_variables、ovveridesを含む私自身のファイルで、次のようになります。

$container-large-desktop: 1980px;
$screen-lg-min: 1980px;

ただし、ブートストラップの最大画面のブレークポイントは1200pxのままです。

Webpackを使用するAngular2シードプロジェクトを使用しており、bootstrap-loadernpmパッケージを使用してBootstrapをロードしています

Weblurk

ブートストラップローダーを使用してブートストラップをロードしているので、.bootstraprcアプリケーションのルートにファイルが作成されているようです。

ブートストラップのデフォルト変数をオーバーライドするには、そのファイルに以下を追加する必要があります。 preBootstrapCustomizations: ./src/app/shared/styles/_variables.scss

ブートストラップローダーのドキュメントから:

preBootstrapCustomizations:元のBootstrap変数の前にインポートされるBootstrap変数をカスタマイズします。したがって、派生したBootstrap変数は、ここからの値に依存する可能性があります。派生したBootstrap変数の例については、Bootstrap_variables.scssファイルを参照してください。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ