素敵なサムシングを独断と偏見で一方的に紹介するブログ(´・ω・`)

IT

【sass導入編】今流行りの「Nuxt.js」を使ってサーバーサイドレンダリング(SSR)をしてみよう【Vue.js】

投稿日: 2019年6月12日
最終更新日:

スポンサーリンク

336×280




おさらい

前回までで、ローカルでのサーバー起動・動作確認まで行うことが出来ました。

今回は、プロジェクトへのsassの導入を進めていこうと思います。

Sassとは?

What’s?

導入をする前に簡単にですが、Sassについておさらいです。

Sassとは、Syntactically(構文が) Awesome(イカした) StyleSheet(スタイルシート)の略です。

なにそれかっこいい!


Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.Sass: Syntactically Awesome Style Sheets

具体的には、「SASS」記法と、「SCSS」記法の二種類が用意されています。
SCSSもSassなので混乱しないように気をつけましょう。

いずれも、構造化記述が可能なのでセレクターに対するスタイル指定の関係性がとても分かりやすくなります。

記述方法のサンプル

今回は以下のCSSをそれぞれの記法で書いてみようと思います。

より細かい記法についてはドキュメントを参照してください。

Sass Basics

Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first.Sass: Sass Basics

SASS記法

SASS記法は以下のようなRubyのような記述量の少ない書き方となっています。

インデントにより階層を表すので見やすいのも特徴ですね。

SCSS記法

SCSS記法通常のCSS記述に近く、そのまま使えるので互換性と可読性が高いのが特徴です。

手順

必要ライブラリのインストール

まずは、sassを利用するための必要ライブラリをインストールしていきましょう。

こんな感じで完了すると思います。

sassファイルの作成

では、実際にsassファイルを作成してみましょう。
今回は簡単な変数を定義して、その変数をページ側で参照するようにしてみます。

まずは、assets/sassディレクトリを追加し、その中にvariable.sassを作成しましょう。

こちらは、sassで利用する変数を定義するファイルとなります。

pagesのstyle修正

次に、pages/index.vueの中にあるstyleタグの中身を修正していきましょう。

lang=scss

ここでstyleタグにlang属性でscssと追加しました。

これは、vue-loaderプリプロセッサと呼ばれる機能で、「この中はscssによる記述なのでコンパイルが必要だよ!」と教えるための記載となるのでsassを使う場合は必須です。

vue-loader のおかげで、ただ lang 属性を使うだけで <template> や <script> あるいは <style> などのためのプリプロセッサを使うことができます。プリプロセッサ – Nuxt.js

こちらを指定しないと、コンパイルが走らないので変数展開がされずにCSSが適用されなくなってしまいます。

scoped

scopedについては、この指定がないとグローバルなcssとして反映されてしまいます。

基本的にpagesの中のテンプレート内で指定したcssは自分自身(pages)と参照しているコンポーネントに反映するのが理想ですが、scoped属性を指定しないと、親レイアウトにまで影響が出てしまいます。

試しに、layouts/default.vueの中と、pages/index.vueの中にそれぞれh1.scoped--sampleに該当する要素を作成し、以下のような指定をしてみます。

scoped有り

自動でdata-v-XXX属性に対するセレクタが追加されるので、親レイアウトには適用されないようにコンパイルされています。

scoped無し

クラスセレクタのみのCSSになっているのでグローバルに適用されてしまい、親レイアウトに影響が出てしまっています。

nuxt.config.jsの修正

次に、nuxt.config.jsに変更を加えていきます。

確認

では、準備が出来ましたので実際に起動してみましょう。

正常に変数が展開されて適用されていますね!

本日のオススメ商品

終わりに

以上のように、モジュールを追加するだけでsassの対応が出来てしまいました。

今時は生のcssを書くことはほとんどないと思いますし、sassなどのcssコンパイラーを使う方が格段にメリットがあるので、是非導入してみてください♪

336×280




336×280




CATEGORIES & TAGS

IT, , , , , , , , ,

blogenist

Author: blogenist