ダッシュで奪取

自分用のメモ

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

目次

  1. 事象
  2. 解決方法
  3. 参考URL

1. 事象

  • 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.
環境
  • Vue.js 2.6.11

  • Vue CLI 4.4.1

  • Vuetify 2.2.32

  • Vuetify-loader 1.4.4

2. 解決方法

  • scss ファイルはこんな感じにしています
src
├── assets
│   └── scss
│     ├── main.scss
│     └── _variables.scss
│
vue.config.js
scss とは別に、sass ファイルを読み込む記述を追加
  • sass ファイルの方はセミコロンなし
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/assets/scss/main.sass"`
      },
      scss: {
        prependData: `@import "@/assets/scss/main.scss";`
      }
    }
  },
  "transpileDependencies": [
    "vuetify"
  ]
}
src/assets/scss/main.sass
  • 中身が空っぽのファイルを作る

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

3. 参考URL