0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【nuxt】【style-resources】「Semicolons aren't allowed in the indented syntax. というエラーがでて、buildできない

Posted at

やりたかった事

scssの変数や、mixin等を一括で各コンポーネントに読み込みたい。そしてそれをbuildしたい。

手順

下記を参考に、scssの変数や、mixin等を一括で各コンポーネントに読み込んだ。
https://github.com/nuxt-community/style-resources-module

npm i @nuxtjs/style-resources

もしくは

yarn add -D @nuxtjs/style-resources

その後、 nuxt.config.jsにて追記

export default {
  buildModules: [
    '@nuxtjs/style-resources',
  ],

  styleResources: {
   // それぞれの環境に合わせて設定を記述
   sass: [],
   scss: [],
   less: [],
   stylus: []
  }
}

僕の場合は、scssファイルを使用していたので以下に変更

export default {
  buildModules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: [ // scssの変数や、mixin等のファイル名を記述
       '~assets/scss/variables.scss',
       '~assets/scss/mixin.scss',
       '~assets/scss/style.scss',
      ]
  }
}

build時に、vuetify-moduleのエラーが発生

これで開発環境では特に問題起こらず一括読み込みができるようになった。
しかし、なぜがbuildができない。。。
スクリーンショット 2020-05-20 16.53.48.png

Semicolons aren't allowed in the indented syntax

v-〇〇でのエラーなので、vuetify関連でエラーが発生してるぽい。

解決策

全く同じ現象に遭遇した人がいたので参考にしてみた。
https://github.com/nuxt-community/vuetify-module/issues/82

話を追っていくと、 一旦、node_modulesを削除、再インストールしてみると良いとのこと。

node_modeluesの削除&再インストール

試しに
node_modeluesの削除
npm i
を行ってみると、無事解決できた。詰まったらこれ大事ですね。

スクリーンショット 2020-05-20 17.42.11.png
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?