我刚刚创建了标准教程nuxt.js应用
引用中央.scss
文件nuxt.config.js
不是问题(一些简单的样式包含显示效果,因此它确实有效)。
...
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模式不匹配的选项对象进行了初始化。-options具有未知属性'indentedSyntax'。这些属性有效:
值得注意的是:我尚未添加indentedSyntax
属性!
然后我尝试在sass
-array以及嵌套的内部sassOptions
...
sass: {
sassOptions: {
indentedSyntax: true
}
},
但是,没有运气。–我是否需要以某种方式将其塞入webpack选项(在内nuxt.config.js
)以使webpack(在nuxt的支持下)实现?
控制台中的完整错误消息:
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' }
],
我解决了类似的问题,回滚我顶嘴装载机包版本7.0.0副版本8.0.0。
目前,GitHub中存在一个公开问题@ vuejs / vue-cli,该问题与这种不兼容性有关:
vue-cli和sass-loader @ 8不兼容#4513
祝好运!