NuxtにSass-loaderを導入する – ﾉﾘｰｰｰﾝ’s Blog

NuxtだってScssを使いたい。というわけで入れます。

Webpack確認

今回Nuxt2系（v2.15.8）を入れたのですが、Webpackはデフォルトでv4が入るのでしょうか。sass-loaderのv11.0.0以降はwebpackのバージョン5以上しか対応していないようなので、v10をインストールします。

webpackの確認は

npm list webpack

これでwebpackが5以上なら普通にインストールすればいいのですが、

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

あてくしのバージョンは4だったので10をインストールしました。

npm install --save-dev sass sass-loader@10

使い方

<style lang="scss">とすればOKです。

<style lang="scss">
.main {
  .title {
    font-size: 32px;
  }
}
</style>

共通化はassets/scss/common.scss作成して、nuxt.config.jsで読み込めばOKです。
common.scss

.wrapper {
  width: 1200px;
  margin: 0 auto;
}
a {
  text-decoration: none;
  transition: 0.3s;
  color: inherit;
  &:hover {
    opacity: 0.7;
  }
}

nuxt.config.js

// Global CSS: https://go.nuxtjs.dev/config-css
css: ['ant-design-vue/dist/antd.css', '~/static/assets/scss/common.scss'],

変数を定義

先ほど作成したscssフォルダに_variable.scssを作成し変数を定義した後,npm実行。

npm i @nuxtjs/style-resources

nuxt.config.jsに追記します。

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/style-resources', // ココ！
  ],
  styleResources: {
    scss: ['~/assets/scss/_variable.scss'], // ココ！
  },

Author: Noreen

どうも、こんにちは。国外をフラフラフラフラしながら仕事をしていましたが、コロナもあり自粛中です。現在は米カリフォルニアベイエリアでカロリー摂取の日々。ブログではどこかの誰かの役に立つかもしれない情報を気ままに更新しています。 View all posts by Noreen