vue.jsでSASSを「通常の方法」で使用するにはどうすればよいですか？

Question

これまで、私はGrassと一緒にsassを使用しました。その結果、x .scssファイルをstyle.cssにコンパイルしました。

私はReactで1つのプロジェクトしか行っていませんが、Vue.jsで初めて作業しているので、理解しようとしていることがいくつかあります。

私はVueの成分と同じファイルにCSSスタイルを含める場合は、私は単に私が理解から

<style lang="sass"> 
    @import '_card.scss' 
    // Custom CSS code here 
</style> 

を使用することができ、Vueのは、すべての.vueファイルからすべてのスタイリングを取り、それをコンパイルstyle.cssに挿入します。しかし私は確信していないので、私はこれを尋ねます。

1. 実行時にVueコンポーネントが呼び出されるのは、すべてのスタイリングを1つのファイルに読み込む代わりに、スタイリングの特定の部分がコンパイルされるということですか？

2. 私はVueコンポーネントファイルの中にスタイリングを入れても大したことではありません。グローバルスタイルをロードするにはどうしたらいいですか？私が正しく覚えていれば、各Reactコンポーネントにcssファイルをロードしなければならず、この点は私には分かりません。ヘッダーにスタイルをロードしたいだけです。 Vue Documentationから

Answer 1

： 成分抽出CSS

単一ファイルのコンポーネントを使用して、コンポーネント内部のCSSは、JavaScriptを経由してタグとして動的に注入されます。これは実行時のコストが低く、サーバー側のレンダリングを使用している場合は、 "スタイルのないコンテンツのフラッシュ"が発生します。 CSSをすべてのコンポーネントにわたって同じファイルに抽出すると、これらの問題が回避され、より良いCSSの縮小とキャッシングが可能になります。 どのように行うの見るためにそれぞれのビルド・ツールのドキュメンテーションを参照してください。

• Webpack + vue-loader（VUE-CLIのWebPACKのテンプレートは、この が事前に設定されています）
• Browserify + vueify
• Rollup + rollup-plugin-vue

あなたの最初の質問に答えるには： "...スタイリングの特定の部分は、すべてのスタイリングを1つのファイルに読み込むのではなく、コンパイルされますか？"

プロジェクトの設定方法によって異なります。 Webpackテンプレートを使用して構築されている場合は、そのスタイルを組み合わせる必要があります（範囲指定されている場合は、元のコンポーネントの接頭辞になります）

2番目の質問： スタイルをグローバルに追加すると、既にApp.vueにあるコードを追加できます。

<style lang="sass"> 
    @import '_card.scss' 
</style>