Nuxtでvuetifyを使用するとdart-sassの@useでエラーが出る

7657 ワード
dart-sass Sass nuxt.js Vuetify Sass テキストリンク

本題の通りで、Nuxtでvuetifyを使用するとdart-sassの@useでエラーが出るんです。。
その経緯と、解決方法についてまとめました。

環境
MacBook Pro (13-inch, M1, 2020)
macOS Monterer バージョン12.0.1
node -v 16.11.0
yarn -v 1.22.17

ひとまずyarn create app

create-nuxt-app v4.0.0
✨  Generating Nuxt.js project in test5
? Project name: test
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/Jamstack hosting)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? What is your GitHub username? suzu nagano
? Version control system: Git

上記参考に以下でsass追加

yarn add --dev sass sass-loader@10

ここまでのpackage.json

  "dependencies": {
    "core-js": "^3.19.3",
    "nuxt": "^2.15.8",
    "vue": "^2.6.14",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "vuetify": "^2.6.1",
    "webpack": "^4.46.0"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.12.3",
    "sass": "^1.49.9",
    "sass-loader": "10"
  }

ここまでのnuxt.config.js(追記などはしていない)

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/vuetify
    '@nuxtjs/vuetify',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
  ],

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

style追加

ここでassets/style.scssを作成
pages/index.vueに以下追記

<style lang="scss" scoped>
@use "/assets/style.scss";
</style>

ここでyarn devすると…

 ERROR  Failed to compile with 1 errors                                                                                                           friendly-errors 19:52:09


 ERROR  in ./pages/index.vue?vue&type=style&index=0&id=2a183b29&lang=scss&scoped=true&                                                            friendly-errors 19:52:09

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):                                                                                friendly-errors 19:52:09
SassError: @use rules must be written before any other rules.
   ╷
88 │ @use "/assets/style.scss";
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  pages/index.vue 88:1  root stylesheet
                                                                                                                                                  friendly-errors 19:52:09
 @ ./node_modules/vue-style-loader??ref--7-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--7-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--7-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./pages/index.vue?vue&type=style&index=0&id=2a183b29&lang=scss&scoped=true& 4:14-391 15:3-20:5 16:22-399
 @ ./pages/index.vue?vue&type=style&index=0&id=2a183b29&lang=scss&scoped=true&
 @ ./pages/index.vue
 @ ./.nuxt/router.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

エラーがでる。。。

vuetify公式によると…以下の設定を追記せよとのこと

treeShake: true

nuxt.config.js

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,　　// ※※※　ここに追記　※※※
    theme: {
      dark: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    }
  },

ここで再度yarn devする。
だが、同様のエラーがでる。。。
なんでや。。。

解決方法

nuxt.config.jsに以下追記

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    loaders: { // なくても動いた
      scss: {
        implementation: require('sass'),
      }
    },
    extend (config) {
      config.module.rules.push({
        test: /\.scss$/,
        loader: "sass-loader",
        exclude: /(node_modules)/,
        options: {
          additionalData: "",
        },
      })
    }
  }

原因的な何か

node_modules/@nuxtjs/vuetify/dist/sass.js
ここで以下の処理をおこなっているよう…

    // Custom variables
    if (customVariables && customVariables.length > 0) {
        const sassImports = customVariables
            .map(path => `@import '${path}'`)
            .join('\n');
        sass.additionalData = [sass.additionalData, sassImports].join('\n');
        const scssImports = customVariables
            .map(path => `@import '${path}';`)
            .join('\n');
        scss.additionalData = [scss.additionalData, scssImports].join('\n');　★ココ
    }

★部分をコメントアウトするとうまくいく…？
ただ、node_modules配下に手を入れるわけにもいかず…
vuetifyで追加されたscss.additionalDataをnuxt.config.jsで更に上書きして空にするとうまくいきました。

とりあえずうまくいっているけど本当に謎。。。
１週間くらい悩みました。。。
いやぁ〜〜本当に謎（二度目）
みなさんNuxt＋vuetify＋dart-sassってどうしてるんですかね