feat: allow configuring scss options separately from sass (#4386)

closes #4116

Author: haoqunjiang

docs/config/README.md

@@ -304,6 +304,8 @@ See [the plugin's README](https://github.com/vuejs/vue-cli/blob/dev/packages/%40
   - [less-loader](https://github.com/webpack-contrib/less-loader)
   - [stylus-loader](https://github.com/shama/stylus-loader)
 
+  It's also possible to target `scss` syntax separately from `sass`, with the `scss` option.
+
   See also: [Passing Options to Pre-Processor Loaders](../guide/css.md#passing-options-to-pre-processor-loaders)
 
   ::: tip

docs/guide/css.md

@@ -131,9 +131,17 @@ module.exports = {
   css: {
     loaderOptions: {
       // pass options to sass-loader
+      // @/ is an alias to src/
+      // so this assumes you have a file named `src/variables.sass`
       sass: {
-        // @/ is an alias to src/
-        // so this assumes you have a file named `src/variables.scss`
+        data: `@import "~@/variables.sass"`
+      },
+      // by default the `sass` option will apply to both syntaxes
+      // because `scss` syntax is also processed by sass-loader underlyingly
+      // but when configuring the `data` option
+      // `scss` syntax requires an semicolon at the end of a statement, while `sass` syntax requires none
+      // in that case, we can target the `scss` syntax separately using the `scss` option
+      scss: {
         data: `@import "~@/variables.scss";`
       },
       // pass Less.js Options to less-loader

docs/zh/config/README.md

@@ -292,6 +292,8 @@ module.exports = {
   - [less-loader](https://github.com/webpack-contrib/less-loader)
   - [stylus-loader](https://github.com/shama/stylus-loader)
 
+  另外，也可以使用 `scss` 选项，针对 `scss` 语法进行单独配置（区别于 `sass` 语法）。
+
   更多细节可查阅：[向预处理器 Loader 传递选项](../guide/css.html#向预处理器-loader-传递选项)
 
   ::: tip 提示

docs/zh/guide/css.md

@@ -110,7 +110,7 @@ module.exports = {
 
 ## 向预处理器 Loader 传递选项
 
-有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 `vue.config.js` 中的 `css.loaderOptions` 选项。比如你可以这样向所有 Sass 样式传入共享的全局变量：
+有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 `vue.config.js` 中的 `css.loaderOptions` 选项。比如你可以这样向所有 Sass/Less 样式传入共享的全局变量：
 
 ``` js
 // vue.config.js
@@ -120,8 +120,24 @@ module.exports = {
       // 给 sass-loader 传递选项
       sass: {
         // @/ 是 src/ 的别名
-        // 所以这里假设你有 `src/variables.scss` 这个文件
+        // 所以这里假设你有 `src/variables.sass` 这个文件
+        data: `@import "~@/variables.sass"`
+      },
+      // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
+      // 因为 `scss` 语法在内部也是由 sass-loader 处理的
+      // 但是在配置 `data` 选项的时候
+      // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
+      // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
+      scss: {
         data: `@import "~@/variables.scss";`
+      },
+      // 给 less-loader 传递 Less.js 相关选项
+      less:{
+        // http://lesscss.org/usage/#less-options-strict-units `Global Variables`
+        // `primary` is global variables fields name
+        globalVars: {
+          primary: '#fff'
+        }
       }
     }
   }

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

@@ -39,6 +39,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()