布団の中にいたい

Androidアプリ開発の勉強をしている傍らで、elasticsearchとかをいじってみたりしています。最近は数学の勉強が楽しくなってきました。

vuejsでscssを使う

自分の作っているアプリのcssが散らかってきたので、scssなりなんなりで整理したいなーと思って調べてのでメモ。

私の環境は、vue-cliのwebpackのテンプレートで作ったものなので、それ準拠で。

やることは以下の3つ

  1. loaderのインストール
  2. vue-loaderのオプションにscssのloaderを設定
  3. scssを書く

loaderのインストール

まずは、scssのためのloaderをインストールします。

npm install sass-loader node-sass --save-dev

簡単

vue-loaderのオプションにscssのloaderを設定

css自体はvueファイルに書いているので、vue-loaderのオプションでscssのloaderを設定します。といっても、vue-cliのwebpackテンプレートで作ったものについては、デフォルトで記述されていました。

以下その部分。

// build/utils.js
// https://vue-loader.vuejs.org/en/configurations/extract-css.html                                                                                                                                             
return {                                                                                                                                                                                                       
  css: generateLoaders(),                                                                                                                                                                                      
  postcss: generateLoaders(),                                                                                                                                                                                  
  less: generateLoaders('less'),                                                                                                                                                                               
  sass: generateLoaders('sass', { indentedSyntax: true }),                                                                                                                                                     
  scss: generateLoaders('sass'),                                                                                                                                                                               
  stylus: generateLoaders('stylus'),                                                                                                                                                                           
  styl: generateLoaders('stylus')                                                                                                                                                                                                                                                                                                                                                                                           
}                               

なので、特にやることは無し。

scssを書く

vueの<style>の部分を<style lang="scss">と書いて、scssを書いていけば大丈夫です。とても楽。

まとめ

vueでscssを使う方法を簡単に調べてみました。今回はvue-cliのwebpackテンプレートを使っていたので、大してやることはなかったですが、自分で一からやろうと思うと若干面倒かもしれないです。細かい説明については、vue-loaderのドキュメントに色々書いてあるので一度読んでみるといいと思います。

github.com