<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
余談
確かにコンポーネントで共通のものを読み込ませるのだったら、何のためのコンポーネント化か、っていうことですよね(丸ごとではなく読み込むものを絞るべきだ、という話は置いておいて)。共通ならば共通のレイアウト部分で読み込ませる方が良い……けど、cssファイルを1つにしたいって場合もあるし。
余談2
今回のバージョンは、大きなアップデートとなっており、パッケージ名についても今までの「vue-cli」から「@vue/cli」に変更となっています。
ナ、ナンダッテー!!(
名前が変わっていることに気付かずに2系を使っていました……。ちなみに3系は最初からScssが使えました。が、出力先等を変更する設定ファイルはどこ……ようやくできたと思ったのにまた迷子に……。