【超初心者向け】Nuxt.jsを使いWebサイトを作成するその2～Sassを使える環境を作る～

2020年3月17日 01:21

前回の続きです。
今回はnuxt.jsでSassを使用できる環境を作ります。

パッケージのインストール

Sassを使用するために必要なsass-loaderとnode-sassパッケージををインストールします。
動作している場合はctrl + Cで停止させ、以下のコマンドを入力します。

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

さて、このコマンドは何をしているのか軽く解説したいと思います。

npm install

npm i

まず最初の部分。
これはパッケージをインストールするためのコマンドで、「install」は「i」と略すことも可能です。

sass-loader node-sass

次に記載されているのはインストールするパッケージです。
複数のパッケージを半角スペースで区切って記載することで、同時にインストールすることが出来ます。

--save-dev

最後の部分。
これを記載することでパッケージがローカルインストールされます。
（node_modulesフォルダ内にインストールされる）
また、これを付けることでpackage.jsonのdevDependenciesへと自動的に記載されます。

【参考】【いまさらですが】package.jsonのdependenciesとdevDependencies
https://qiita.com/chihiro/items/ca1529f9b3d016af53ec

これでsass-loaderとnode-sassがインストールされ、Sassが使用できるようになりました。

「.vue」ファイル内でもSassを使用することが出来ますが、その場合はstyleタグにlang="scss"を追加する必要があります。

<style lang="scss">
.header{
     background:#000;
 
     &__nav{
         background: #fff;
    　}
}
</style>

しかし、このままでは別ファイルで宣言された変数やmixinを参照することが出来ないので、次のパッケージをインストールします。

npm install @nuxtjs/style-resources --save-dev

インストール後、nuxt.config.jsに設定を追加します。
modules内に'@nuxtjs/style-resources',を、その下にstyleResourcesの項目を下記の通り追加します。

module.exports = {
～ 中略 ～
　modules: [
　　'@nuxtjs/style-resources',
　],
　styleResources: [
　　sass: [
　　　'~/assets/sass/ファイル名.sass'
　　],
　],
～ 中略 ～
}

これで変数などが使用できるようになりました。
「ファイル名」の所には使いたいmixinなどが含まれているSassファイルのパスを指定してください。

使用したいSassのファイルはassetsフォルダ内に配置します。
サンプルとして、assetsフォルダ内にscssフォルダを作成し、その中に下記ファイルを作成していきます。

・style.scss

// color
@import 'color';

// common
@import 'common';

・color.scss

$color-bg: #red;

・common.scss

body {
    background-color: $color-bg;
}

これらのcssを適用するため、nuxt.config.jsのGlobal CSSに以下を記載します。
ここに記載したscssやcssファイルは全ページで読み込まれます。

/*
 ** Global CSS
 */
 css: [
     { src: '~/assets/scss/style.scss', lang: 'scss' },
 ],

Sassが使用できるようになっていれば背景が赤色に変わっているはずです。

それでは今回は以上です。
次回はページの作成方法をご紹介いたします。

ご覧頂きましてありがとうございました。