Adding an extra options object to sass-loader

[profyt]

Version

3.9.3

Environment info

System:
OS: Linux 4.20 Linux Mint 19.1 (Tessa)
CPU: (4) x64 AMD Athlon 200GE with Radeon Vega Graphics
Binaries:
Node: 11.13.0 - ~/.nvm/versions/node/v11.13.0/bin/node
Yarn: Not Found
npm: 6.7.0 - ~/.nvm/versions/node/v11.13.0/bin/npm
Browsers:
Chrome: 75.0.3770.80
Firefox: 67.0
npmGlobalPackages:
@vue/cli: 3.9.3

Steps to reproduce

Add in vue.config.js options for sass-loader.

What is expected?

An option with data will be added to the loader options:
{ loader: 'sass-loader', options: { sourceMap: false, ......, data: '@import "~@/variables.scss";' }, }

What is actually happening?

A second options object is created, to which changes are added from vue.config:

{ loader: 'sass-loader', options: { sourceMap: false, ...... }, options: { data: '@import "~@/variables.scss";' }, }

[LinusBorg]

Please provide a reproduction as is required.

How did you check for the duplicate object?

[profyt]

How did you check for the duplicate object?

After changing the configuration, I used vue-cli-service inspect. I found a rule in it for which I made changes and saw a duplication of the options object there.

Here is the repository with the configuration; during inspection, see the sass section, there will be double options everywhere.
https://github.com/profyt/Vue-cli-duplicate-options
-npm i
-vue-cli-service inspect ( to get full config)

[LinusBorg]

Thanks, we'll check it out

[sodatea]

  css: {
    loaderOptions: {
      sass: {
-        options: {
          data: `@import "~@/variables.scss";`
-        }
      },
    }
  }

The example in our documentation does not have the extra options.
See https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders

[profyt]

  css: {
    loaderOptions: {
      sass: {
-        options: {
          data: `@import "~@/variables.scss";`
-        }
      },
    }
  }

@sodatea
But this option will not be added to the settings. It will be added after the options object, therefore the configuration will not be working!
https://github.com/webpack-contrib/sass-loader#string

[sodatea]

I mean, if you do this, the options will be merged correctly:

  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/variables.scss";`
      },
    }
  }

[profyt]

I tried to do as you showed. But as a result, Data is not added to the options, but after them.

[sodatea]

It works on my machine after modifying your reproduction repository.

[sodatea]

The modification I suggested was that this line in your config is extraneous:
https://github.com/profyt/Vue-cli-duplicate-options/blob/7965fceee9d477fd5c304c8fab0395f2457aeb66/vue.config.js#L17