標準チュートリアルnuxt.jsアプリ を作成しました
.scss
で中央のnuxt.config.js
- Fileを参照することは問題ありません(いくつかの単純なスタイルにshow効果が含まれているため、実際に機能しています)。
...
css: ['~/assets/scss/main.scss'],
scss: {},
sass: {},
plugins: [],
...
ただし、main2.sass
ファイルを参照しています...
css: ['~/assets/scss/main2.sass'],
...私を困らせます:
main2.sass
h1.title
background: yellow
color: white !important
ValidationError:無効なオプションオブジェクト。 Sass Loaderは、APIスキーマと一致しないオプションオブジェクトを使用して初期化されました。 -オプションに不明なプロパティ 'indentedSyntax'があります。これらのプロパティは有効です:
注目に値する:indentedSyntax
プロパティをまだ追加していません!
私、次にsass
- array内、およびネストされた内部sassOptions
...内でそうしようとしました...
sass: {
sassOptions: {
indentedSyntax: true
}
},
しかし、すべての運はありません。 – webpack(nuxtの内部)を実現するために、(nuxt.config.js
内の)webpackオプションに何らかの方法でそれを詰め込む必要がありますか?
コンソールの完全なエラーメッセージ:
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
- options has an unknown property 'indentedSyntax'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
at validate (/depot/sandbox/node_modules/schema-utils/dist/validate.js:49:11)
at Object.loader (/depot/sandbox/node_modules/sass-loader/dist/index.js:36:28)
@ ./assets/scss/main2.sass 4:14-225 14:3-18:5 15:22-233
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
また、この(広範なgithub検索の後の)構文は役に立ちません:
css: [
'~/assets/scss/main.scss',
{ src: '~/assets/scss/main2.sass', lang: 'sass' }
],
これは美しく機能しました!
nuxt.config.jsファイル:
/* Global CSS */
css: ['@/assets/main.sass'],
ソース: Nuxt docs-グローバル設定