Vueのコンポーネントの中でScssを使おうとしたら怒られた

<style scoped>

//↓

<style lang="scss" scoped>

としようとしたら下記のように怒られました。

Failed to compile.
./src/components/HelloWorld.vue
Module not found: Error: Can't resolve 'sass-loader' in 'path/to/project/src/components/'

原因はsass-loaderが入っていないこと。ついでにScssのコンパイラもないようなのでnode-sassも不足となります。

> >npm i -D sass-loader node-sass

として入れてあげれば解決。

ついでに

<style lang="scss" scoped>
@import "../assets/scss/assets/bootstrap/bootstrap";

h1, h2 {
//略

とすることで無事読み込みたいものを読み込ませることができました。

参考

• vuejsでscssを使う – 布団の中にいたい
• vue-cliで作成したテンプレートでpug,scss,coffeescriptを使用する – least_alone
• 【Vue.js】.vueファイルの中にscssを書きたい！ | deep-space.blue

余談

• Vue.js + Sass で scoped の style で import したファイルを deep により子コンポーネントに効かせる – Qiita

確かにコンポーネントで共通のものを読み込ませるのだったら、何のためのコンポーネント化か、っていうことですよね(丸ごとではなく読み込むものを絞るべきだ、という話は置いておいて)。共通ならば共通のレイアウト部分で読み込ませる方が良い……けど、cssファイルを1つにしたいって場合もあるし。

余談2

今回のバージョンは、大きなアップデートとなっており、パッケージ名についても今までの「vue-cli」から「@vue/cli」に変更となっています。 Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート) – Qiita

ナ、ナンダッテー！！( 名前が変わっていることに気付かずに2系を使っていました……。ちなみに3系は最初からScssが使えました。が、出力先等を変更する設定ファイルはどこ……ようやくできたと思ったのにまた迷子に……。