グローバルスタイルシートを使用したコンポーネントスタイルのオーバーライド

Question

main.jsファイルにインポートされるmain.scssがプロジェクトで使用されます。そこから、それぞれのコンポーネントにそれぞれのvueファイル内にスタイリングを追加します。

のコンポーネントスタイルの後にというグローバルスタイルシートを挿入できるかどうかは疑問です。 headのスタイルは、main.scss -> component stylings -> overrides.scssのようになります。

これは可能ですか？

Answer 1

bootstrap.jsの中にscssファイルをインポートするとよいとは思いません。パス名を変更

@import '~bootstrap/scss/bootstrap'; 
@import 'global/bootstrap/your_component'; 

@import 'helpers/overrides'; 

し、ニーズに依存： あなたは/src/scss/に1つのmain.scssファイルを作成し、そのファイル内でそのようなものを置くことができます。

は、あなたのファイルは行を追加してsrc/main.jsにインポートされていることを確認してください：

import 'styles/main.scss'; 

このディレクトリ構造は、あなたが望むような方法でいくつかの更新を行うことができるでしょうし、読んでどこに理解しやすいだろうファイルは

Answer 2

CSSは宣言することができます。 overrides.scssのルールは最高の優先度を持ち、main.scssのルールは低いです。 main.scssとコンポーネント内のルールは同じ優先順位を持つことができますが、コンポーネントのルールは後で宣言されるため、エレメントに適用されます。

あなたがこの動作に関する詳細を読むことができます：あなたの代わりに `` bootstrap.js`のmain.js`から私がすべき `@のimport`を言っているのhttps://developer.mozilla.org/en-US/docs/Web/CSS/Specificity