vue.jsの単一コンポーネントファイルないのCSSやSCSSを外出しする方法を解説します。
CSSを別ファイルに分けるメリットは、エディタの補間(特にEmmetとか)が効きやすくなります。
やり方は簡単で単一コンポーネントファイルないのstyle
タグのsrc
属性でファイルを指定するだけです。
<!-- CSSファイルの場合 -->
<style src="./style.css"></style>
<!-- SCSSファイルの場合 -->
<style lang="scss" src="./style.scss"></style>
もちろんスコープ付きCSSにも対応しています。
<!-- CSSファイルの場合 -->
<style scoped src="./style.css"></style>
<!-- SCSSファイルの場合 -->
<style scoped lang="scss" src="./style.scss"></style>