feat: allow configuring scss options separately from sass

closes vuejs#4116

Author: haoqunjiang

packages/@vue/cli-service/__tests__/css.spec.js

@@ -198,6 +198,29 @@ test('css.loaderOptions', () => {
   expect(findOptions(config, 'sass', 'sass')).toMatchObject({ data, indentedSyntax: true, sourceMap: false })
 })
 
+test('scss loaderOptions', () => {
+  const sassData = '$env: production'
+  const scssData = '$env: production;'
+
+  const config = genConfig({
+    vue: {
+      css: {
+        loaderOptions: {
+          sass: {
+            sassData
+          },
+          scss: {
+            scssData
+          }
+        }
+      }
+    }
+  })
+
+  expect(findOptions(config, 'scss', 'sass')).toMatchObject({ scssData, sourceMap: false })
+  expect(findOptions(config, 'sass', 'sass')).toMatchObject({ sassData, indentedSyntax: true, sourceMap: false })
+})
+
 test('should use dart sass implementation whenever possible', () => {
   const config = genConfig()
   expect(findOptions(config, 'scss', 'sass')).toMatchObject({ fiber: require('fibers'), implementation: require('sass') })

packages/@vue/cli-service/lib/config/css.js

@@ -162,10 +162,17 @@ module.exports = (api, rootOptions) => {
 
     createCSSRule('css', /\.css$/)
     createCSSRule('postcss', /\.p(ost)?css$/)
-    createCSSRule('scss', /\.scss$/, 'sass-loader', Object.assign(defaultSassLoaderOptions, loaderOptions.sass))
-    createCSSRule('sass', /\.sass$/, 'sass-loader', Object.assign(defaultSassLoaderOptions, {
-      indentedSyntax: true
-    }, loaderOptions.sass))
+    createCSSRule('scss', /\.scss$/, 'sass-loader', Object.assign(
+      defaultSassLoaderOptions,
+      loaderOptions.scss || loaderOptions.sass
+    ))
+    createCSSRule('sass', /\.sass$/, 'sass-loader', Object.assign(
+      defaultSassLoaderOptions,
+      {
+        indentedSyntax: true
+      },
+      loaderOptions.sass
+    ))
     createCSSRule('less', /\.less$/, 'less-loader', loaderOptions.less)
     createCSSRule('stylus', /\.styl(us)?$/, 'stylus-loader', Object.assign({
       preferPathResolver: 'webpack'

packages/@vue/cli-service/lib/options.js

@@ -40,6 +40,7 @@ const schema = createSchema(joi => joi.object({
     loaderOptions: joi.object({
       css: joi.object(),
       sass: joi.object(),
+      scss: joi.object(),
       less: joi.object(),
       stylus: joi.object(),
       postcss: joi.object()