如何在Vue Nuxt.js中使用SASS(而非SCSS)

webpack Vue.js

LNear

2020-03-24

我刚刚创建了标准教程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' }
],

第3399篇《如何在Vue Nuxt.js中使用SASS(而非SCSS)》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
村村 2020.03.24

我解决了类似的问题,回滚我顶嘴装载机包版本7.0.0副版本8.0.0

目前,GitHub中存在一个公开问题@ vuejs / vue-cli,该问题与这种不兼容性有关:

vue-cli和sass-loader @ 8不兼容#4513

祝好运!

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android