feat!: bump default sass-loader version to v10, drop sass-loader v7 support (#6187)

Author: haoqunjiang

docs/migrations/migrate-from-v4.md

@@ -75,6 +75,7 @@ Though both work in all our tests, please be aware that the `module-alias` appro
 #### Underlying Loaders and Plugins
 
 * `html-webpack-plugin` is upgraded from v3 to v4, see more details in the [release announcement](https://dev.to/jantimon/html-webpack-plugin-4-has-been-released-125d).
+* `sass-loader` v7 support is dropped. See the v8 breaking changes at its [changelog](https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md#800-2019-08-29).
 * `postcss-loader` is upgraded from v3 to v4. Most notably, `PostCSS` options (`plugin` / `syntax` / `parser` / `stringifier`) are moved into the `postcssOptions` field. More details available at the [changelog](https://github.com/webpack-contrib/postcss-loader/blob/master/CHANGELOG.md#400-2020-09-07).
 * `copy-webpack-plugin` is upgraded from v5 to v6. If you never customized its config through `config.plugin('copy')`, there should be no user-facing breaking changes. A full list of breaking changes is available at [`copy-webpack-plugin` v6.0.0 release](https://github.com/webpack-contrib/copy-webpack-plugin/releases/tag/v6.0.0).
 * `file-loader` is upgraded from v4 to v6, and `url-loader` from v2 to v4. The `esModule` option is now turned on by default for non-Vue-2 projects. Full changelog available at [`file-loader` changelog](https://github.com/webpack-contrib/file-loader/blob/master/CHANGELOG.md) and [`url-loader` changelog](https://github.com/webpack-contrib/url-loader/blob/master/CHANGELOG.md)

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

@@ -387,9 +387,3 @@ test('scss loaderOptions', () => {
   // should not merge scss options into default sass config
   expect(findOptions(config, 'sass', 'sass')).not.toHaveProperty('webpackImporter')
 })
-
-test('should use dart sass implementation whenever possible', () => {
-  const config = genConfig()
-  expect(findOptions(config, 'scss', 'sass')).toMatchObject({ implementation: require('sass') })
-  expect(findOptions(config, 'sass', 'sass')).toMatchObject({ implementation: require('sass') })
-})

packages/@vue/cli-service/generator/index.js

@@ -39,11 +39,11 @@ module.exports = (api, options) => {
     const deps = {
       sass: {
         sass: '^1.30.0',
-        'sass-loader': '^8.0.2'
+        'sass-loader': '^10.1.0'
       },
       'dart-sass': {
         sass: '^1.30.0',
-        'sass-loader': '^8.0.2'
+        'sass-loader': '^10.1.0'
       },
       less: {
         'less': '^3.0.4',

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

@@ -1,6 +1,5 @@
 const fs = require('fs')
 const path = require('path')
-const { semver, warn, pauseSpinner, resumeSpinner } = require('@vue/cli-shared-utils')
 
 const findExisting = (context, files) => {
   for (const file of files) {
@@ -16,25 +15,6 @@ module.exports = (api, rootOptions) => {
     const shadowMode = !!process.env.VUE_CLI_CSS_SHADOW_MODE
     const isProd = process.env.NODE_ENV === 'production'
 
-    let sassLoaderVersion
-    try {
-      sassLoaderVersion = semver.major(require('sass-loader/package.json').version)
-    } catch (e) {}
-    if (sassLoaderVersion < 8) {
-      pauseSpinner()
-      warn('A new version of sass-loader is available. Please upgrade for best experience.')
-      resumeSpinner()
-    }
-
-    const defaultSassLoaderOptions = {}
-    try {
-      defaultSassLoaderOptions.implementation = require('sass')
-      // since sass-loader 8, fibers will be automatically detected and used
-      if (sassLoaderVersion < 8) {
-        defaultSassLoaderOptions.fiber = require('fibers')
-      }
-    } catch (e) {}
-
     const {
       extract = isProd,
       sourceMap = false,
@@ -205,34 +185,21 @@ module.exports = (api, rootOptions) => {
     createCSSRule('postcss', /\.p(ost)?css$/)
     createCSSRule('scss', /\.scss$/, 'sass-loader', Object.assign(
       {},
-      defaultSassLoaderOptions,
       loaderOptions.scss || loaderOptions.sass
     ))
-    if (sassLoaderVersion < 8) {
-      createCSSRule('sass', /\.sass$/, 'sass-loader', Object.assign(
-        {},
-        defaultSassLoaderOptions,
-        {
-          indentedSyntax: true
-        },
-        loaderOptions.sass
-      ))
-    } else {
-      createCSSRule('sass', /\.sass$/, 'sass-loader', Object.assign(
-        {},
-        defaultSassLoaderOptions,
-        loaderOptions.sass,
-        {
-          sassOptions: Object.assign(
-            {},
-            loaderOptions.sass && loaderOptions.sass.sassOptions,
-            {
-              indentedSyntax: true
-            }
-          )
-        }
-      ))
-    }
+    createCSSRule('sass', /\.sass$/, 'sass-loader', Object.assign(
+      {},
+      loaderOptions.sass,
+      {
+        sassOptions: Object.assign(
+          {},
+          loaderOptions.sass && loaderOptions.sass.sassOptions,
+          {
+            indentedSyntax: true
+          }
+        )
+      }
+    ))
     createCSSRule('less', /\.less$/, 'less-loader', loaderOptions.less)
     createCSSRule('stylus', /\.styl(us)?$/, 'stylus-loader', loaderOptions.stylus)
 

packages/@vue/cli-service/package.json

@@ -111,7 +111,7 @@
   "devDependencies": {
     "fibers": ">= 3.1.1 <6.0.0",
     "sass": "^1.30.0",
-    "sass-loader": "^8.0.2",
+    "sass-loader": "^10.1.0",
     "stylus-loader": "^4.3.1",
     "vue": "^2.6.12",
     "vue-router": "^3.4.3",

yarn.lock

@@ -18733,16 +18733,16 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
-sass-loader@^8.0.2:
-  version "8.0.2"
-  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-8.0.2.tgz#debecd8c3ce243c76454f2e8290482150380090d"
-  integrity sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==
+sass-loader@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.1.0.tgz#1727fcc0c32ab3eb197cda61d78adf4e9174a4b3"
+  integrity sha512-ZCKAlczLBbFd3aGAhowpYEy69Te3Z68cg8bnHHl6WnSCvnKpbM6pQrz957HWMa8LKVuhnD9uMplmMAHwGQtHeg==
   dependencies:
-    clone-deep "^4.0.1"
-    loader-utils "^1.2.3"
-    neo-async "^2.6.1"
-    schema-utils "^2.6.1"
-    semver "^6.3.0"
+    klona "^2.0.4"
+    loader-utils "^2.0.0"
+    neo-async "^2.6.2"
+    schema-utils "^3.0.0"
+    semver "^7.3.2"
 
 sass@^1.30.0:
   version "1.30.0"
@@ -18801,7 +18801,7 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-schema-utils@^2.0.0, schema-utils@^2.6.1, schema-utils@^2.6.5, schema-utils@^2.7.0:
+schema-utils@^2.0.0, schema-utils@^2.6.5, schema-utils@^2.7.0:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
   integrity sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==