環境
- Vue.js 2.6.11
- Vue CLI 4.4.1
- Vuetify 2.2.32
- Vuetify-loader 1.4.4
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.
2. 解決方法
src
├── assets
│ └── scss
│ ├── main.scss
│ └── _variables.scss
│
vue.config.js
scss とは別に、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