HTMLヘッダーからCSSをインポートするときの違いVS JSファイルVS Vueコンポーネント

Question

Vue（webpackがインストールされている）を試していて、CSSの読み込み方法に違いがあるのだろうかと思っています。 HTMLヘッダーのスタイルシートをインポート

1. ：あなたはCSSをインポートできる3つの方法があるかのように思えるJSファイル（例えばmain.js）からcssファイルのインポート<link type="text/css" rel="stylesheet" ... >
2. ：import '@/assets/css/app.cs'/require
Vueのスタイルタグ内
3. インポートCSSファイルは：<style>@import '...'</style>

どのような状況で、我々は、他の上にインポートする1​​つの方法を使用したいのでしょうか？このための最良の手順は何ですか？

Answer 1

私の理解では、HTMLヘッダーからのインポートは「グローバル」スタイルシートとして機能します。これは、他のコンポーネントとやりとりする必要のないCSSファイルをリセットまたは正規化する必要がある場合に特に便利です。

JSファイルからのインポートはWebpack機能です。私は通常、メイン（または）個々のページコンポーネントにスタイルをインポートし、それらのコンポーネントは子コンポーネントのスタイルシートを共有します。

最後に、VueJSスタイルタグは、「スコープ付き」スタイルでよく使用されます。これは、多くの子コンポーネントに固有のスタイルを必要とし、他のコンポーネントスタイルと競合したくない場合に特に便利です。

このようなスコープ付きスタイリングを使用できます。

<style scoped> 
/* Your styles over here /* 
</style> 

ます。また、気に入りのスタイルタグでCSSプリプロセッサを使用することができます。もちろん

<style lang="scss">

<style lang="less">

プリプロセッサのスタイルもscoped属性を持つことができます。