Vue.js - 単一の* .vueファイルからCSS（SCSS）を分離する

Question

デフォルトのVue.jsのコンセプトはテンプレート、JS、およびスタイルを1つの* .vueファイル内にまとめたものです。

私の質問は：* .vueファイルからCSS/SCSSを分割した構造の下に取得する方法：

components 
-- componentA 
---- componentA.vue 
---- componentA.scss 
-- componentB 
---- componentB.vue 
---- componentB.scss 
-- componentC 
---- componentC.vue 
---- componentC.scss 

は、このようなプロジェクト構造を作成し、WebPACKのを介してメイン/ distのCSSを構築するための任意の良い習慣はありますか？すべての例またはVue CLIテンプレート？

Answer 1

あなたはスタイルをインポートすることができます。

<template> 
... 
</template> 

<style lang="scss"> 
    @import './foo.scss'; 
</style> 

<script> 
... 
</script> 

あなたはsass-loaderとconfigure your webpack: vue-loaderをインストールする必要があります。