Rhyztech blog

vue.jsの単一コンポーネントでCSSを外出しする

tech

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>

Copyright 2021, rhyztech. All Rights Reserved.