ラック
Home > ブログ > 記事 > 2018年12月 > Vueのコンポーネントの中でScssを使おうとしたら怒られた

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 {
//略

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

参考

余談

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

余談2

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

Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート) - Qiita

ナ、ナンダッテー!!(

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

タグ: Sass(Scss),Vue.js

 



関連する記事一覧