Tag: sass

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'], // ココ！
  },