【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
[Bug Report] Vuetify not working with .scss file · Issue #7795 · vuetifyjs/vuetify
↑ 何故この事象が発生するのかの理由もこちらにありました