next.jsでスタイルにsassを適用する

next.jsでスタイルにsassを適用する:

今回はnext.jsでデザインをsass(サス)で書いていきたいと思い、環境を作ったので記録を残していきます。

「sassって何？」という方は以下の記事で分かりやすく解説されていますので確認してみてください

https://ferret-plus.com/6211

それでは早速インストールから使い方までを説明していきたいと思います。

next-sassのインストール

まずはnext-sassともう一つ、node-sassが必要なのでインストールしていきます

yarn add @zeit/next-sass node-sass 

さらにプロジェクト直下にnext.config.jsを作成しましょう

next.config.js

const withSass = require('@zeit/next-sass') 
module.exports = withSass() 

これでsassの準備は整いました

nextでのsassの使い方

さて実際にsassを使ってみましょう

まずはお好きな場所にscssファイルを置くディレクトリを作成してください。私の場合は以下のような構成にしました。

next-test

├ next.config.js

├ node-modules

├ package.json

├ pages

│ └ index.js

├ static

│ ├ scss

│ └ styles.scss

└ yarn.lock

次にcssモジュールを使う方法と使わない方法の2通りを紹介していきます。これは好みで使いやすい方法で実装していただいて構わないです。

私は普段cssモジュールを使った記述をしています。

ちなみにsassの記法に関してですがscss記法が主流かと思いますので、こちらを採用しましょう

cssモジュールを使わない方法

まずはcssモジュールを使わない方法からです。index.jsファイルは以下のようになります

index.js

import "../static/scss/styles.scss" 
 
export default class Index extends React.Component { 
    render() { 
        return ( 
            <div> 
                <div className="main-container"> 
                    <h1>Hello</h1> 
                </div> 
                <div className="sub-container"> 
                    <h1>world</h1> 
                </div> 
            </div> 
        ) 
    } 
} 

styles.scssにはサンプルとして以下の記述をしておきましょう

styles.scss

$big-font: 200px; 
$small-font: 50px; 
.main-container { 
  width: 500px; 
  height: 200px; 
  background-color: red; 
 
 h1{ 
   font-size: $big-font; 
 } 
} 
 
.sub-container { 
  width: 200px; 
  height: 100px; 
  background-color: blue; 
 
 h1{ 
   font-size: $small-font; 
 } 
} 

これで完了です。以下のコマンドでnext.jsを起動してみましょう。

yarn run dev 

この様になっていれば成功です。入れ子形式で、変数を利用したscssが適用されているのが確認できましたでしょうか？

cssモジュールを使う方法

続いてcssモジュールを使った方法をやってみましょう。まずはnext.config.jsの内容を少し変えます。

withSassの引数の中にあるcssModulesプロパティをtrueにするだけです。

next.config.js

const withSass = require('@zeit/next-sass') 
module.exports = withSass({ 
  cssModules: true 
}) 

そしてindex.jsとscssのファイルも少々変更していきます。

index.jsではsytles.scssファイルをcssモジュールとして参照します。そしてclassNameにcssモジュールと参照したいプロパティを割り当てます。

ここでポイントなのですがcssモジュールを使わない方法では「main-container」を使っていました。

ただ今回はcssモジュールを使うと「-」が使えません。実際にエラーが出てしまいました。

この理由は単純でjsの変数には「-」を使えないからです。

jsに限らず「-」はハイフンではなく、マイナスを表します。

cssの時には普通に「-」を使ってクラスの定義をします。しかしJSの変数扱いなので「mainContainer」もしくは「main_container」のように表記しましょう。

index.js

import css from "../static/scss/styles.scss" 
 
export default class Index extends React.Component { 
    render() { 
        return ( 
           <div> 
             <div className={css.mainContainer}> 
               <h1>Hello</h1> 
             </div> 
             <div className={css.subContainer}> 
               <h1>world</h1> 
             </div> 
           </div> 
        ) 
    } 
} 

styles.scss

$big-font: 150px; 
$small-font: 50px; 
.mainContainer { 
  width: 100%; 
  height: 200px; 
  background-color: red; 
 
  h1{ 
    font-size: $big-font; 
  } 
} 
 
.subContainer { 
  width: 50%; 
  height: 100px; 
  background-color: blue; 
 
  h1{ 
    font-size: $small-font; 
  } 
} 

これで実際の画面で動作を確認してcssモジュールを使わないときと同じ画面になっていれば成功です。

おまけでchromeのデベロッパーツールを見てみましょう。

reactでcssモジュールを使って反映させると以下のようにランダムな英数字がclassに割り当てられるようになります。

まとめ

いかがでしたでしょうか？

今回の内容は以下のgithubからファイルをダウンロードすることができるので参考にしてみて下さい

https://github.com/mikinovation/blog-react-sample/tree/2.0

sassを使えば拡張性や保守性を高めた上でcssを書いていくことができます。

そしてnext.jsのモジュールを使えば簡単にsassを使える環境を構築することができました。

他にも便利なパッケージがnextには用意されているので、これからどんどん紹介していきたいと思います。