Scss compilation is broken when using css.loaderOptions.sass in vue.config.js

[KubaJastrz]

Version

4.0.0-rc.4

Reproduction link

https://github.com/KubaJastrz/vue-cli-repro/tree/rc4/scss-bug

Environment info

Environment Info:

  System:
    OS: Windows 10
    CPU: (8) x64 Intel(R) Core(TM) i7-4790K CPU @ 4.00GHz
  Binaries:
    Node: 12.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.17763.1.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  4.0.0-rc.4
    @vue/babel-preset-jsx:  1.1.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.1.0
    @vue/cli-overlay:  4.0.0-rc.4
    @vue/cli-plugin-babel: ^4.0.0-rc.4 => 4.0.0-rc.4
    @vue/cli-service: ^4.0.0-rc.4 => 4.0.0-rc.4
    @vue/cli-shared-utils:  4.0.0-rc.4
    @vue/component-compiler-utils:  3.0.0
    @vue/preload-webpack-plugin:  1.1.1
    @vue/web-component-wrapper:  1.2.0
    vue: ^2.6.10 => 2.6.10
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.7.1
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

git clone https://github.com/KubaJastrz/vue-cli-repro.git
git checkout rc4/scss-bug
yarn install
yarn serve

What is expected?

it works as described in documentation: https://next.cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders

// by default the `sass` option will apply to both syntaxes

What is actually happening?

 error  in ./src/App.vue?vue&type=style&index=0&lang=scss&                                                   
                                                                                                             
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):                                           
SassError: Invalid CSS after "#app {": expected "}", was "{"                                                 
        on line 22 of D:\Code\sandbox\vue-cli-repro\src\App.vue                                              
>> #app { {                                                                                                  
                                                                                                             
   ------^                                                                                                   
                                                                                                             
                                                                                                             
 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!
./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!
./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./
node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss& 4:14-416 14:3
-18:5 15:22-424                                                                                              
 @ ./src/App.vue?vue&type=style&index=0&lang=scss&                                                           
 @ ./src/App.vue                                                                                             
 @ ./src/main.js                                                                                             
 @ multi (webpack)-dev-server/client?http://192.168.1.15:8080/sockjs-node (webpack)/hot/dev-server.js ./src/m
ain.js                                                                                                       

[KubaJastrz]

I suspect this might be caused by mutating loaderOptions.sass here.

From inspect command (note the indentedSyntax: true which should be reserved to sass):

/* config.module.rule('scss').oneOf('vue-modules').use('sass-loader') */
{
  loader: 'sass-loader',
  options: {
    sourceMap: false,
    sassOptions: {
      includePaths: [
        './src/styles'
      ],
      indentedSyntax: true
    }
  }
}

When I change this to

  sassOptions: Object.assign(
+   {},
    (loaderOptions.sass && loaderOptions.sass.sassOptions) || {},
    {
      indentedSyntax: true
    }
  )

it compiles.