vuejsでscssを使う
自分の作っているアプリのcssが散らかってきたので、scssなりなんなりで整理したいなーと思って調べてのでメモ。
私の環境は、vue-cliのwebpackのテンプレートで作ったものなので、それ準拠で。
やることは以下の３つ
- loaderのインストール
- vue-loaderのオプションにscssのloaderを設定
- 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のドキュメントに色々書いてあるので一度読んでみるといいと思います。
