web-dev-qa-db-ja.com

Vue Nuxt.jsでのSASS(SCSSではない)の使用方法

標準チュートリアル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' }
],
4
Frank Nocke

これは美しく機能しました!

nuxt.config.jsファイル:

 /* Global CSS */
  css: ['@/assets/main.sass'],

ソース: Nuxt docs-グローバル設定

0
Despertaweb