ダッシュで奪取

ゲーム、読書、人生

【Vue.js】Vuetifyを使ったプロジェクトで、scssがビルドできない

環境
  • Vue.js 2.6.11

  • Vue CLI 4.4.1

  • Vuetify 2.2.32

  • Vuetify-loader 1.4.4

事象

  • Vuetify で遊んでいたプロジェクトで、scss ファイルを使おうとしたら下記のエラーになる
SassError: semicolons aren't allowed in the indented syntax.
  • セミコロンが使えないのかな?と思い外してみると、また別のエラーになる
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.

解決方法

  • scss ファイルはこんな感じにしています
src
├── assets
│   └── scss
│     ├── main.scss
│     └── _variables.scss
│

scss とは別に、sass ファイルを読み込む記述を追加

  • sass ファイルの方はセミコロンなし

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/main.sass"`
      },
      scss: {
        prependData: `@import "@/assets/scss/main.scss";`
      }
    }
  },
  "transpileDependencies": [
    "vuetify"
  ]
}

sass ファイルを作る

  • src/assets/scss/main.sass に、中身が空っぽのファイルを作る

  • これでビルドが通る → ヤッター

参考URL

にほんブログ村 IT技術ブログ IT技術メモへ