From 90f8b7e96b4a8f75a01b0091914b326273d4d7dd Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Wed, 6 Jan 2021 16:50:38 +0800 Subject: [PATCH 1/3] feat!: bump default sass-loader version to v10, drop sass-loader v7 support --- packages/@vue/cli-service/generator/index.js | 4 +- packages/@vue/cli-service/lib/config/css.js | 59 +++++--------------- packages/@vue/cli-service/package.json | 2 +- yarn.lock | 20 +++---- 4 files changed, 26 insertions(+), 59 deletions(-) diff --git a/packages/@vue/cli-service/generator/index.js b/packages/@vue/cli-service/generator/index.js index ef6705182f..c36edede16 100644 --- a/packages/@vue/cli-service/generator/index.js +++ b/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', diff --git a/packages/@vue/cli-service/lib/config/css.js b/packages/@vue/cli-service/lib/config/css.js index 2208d7be6f..8b8d1d82e7 100644 --- a/packages/@vue/cli-service/lib/config/css.js +++ b/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) diff --git a/packages/@vue/cli-service/package.json b/packages/@vue/cli-service/package.json index 5f2e900fc6..f72e31926f 100644 --- a/packages/@vue/cli-service/package.json +++ b/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", diff --git a/yarn.lock b/yarn.lock index 751fbc7f14..0609780f41 100644 --- a/yarn.lock +++ b/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== From 0100b4916ef315abec1c33c798d8044fe35654fa Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Wed, 6 Jan 2021 16:58:26 +0800 Subject: [PATCH 2/3] docs: update migration guide --- docs/migrations/migrate-from-v4.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/migrations/migrate-from-v4.md b/docs/migrations/migrate-from-v4.md index a9573b2086..7e4ed77ecd 100644 --- a/docs/migrations/migrate-from-v4.md +++ b/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) From 8cfa2ada45c227d593e6883e86bffaee17522415 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Thu, 7 Jan 2021 15:58:22 +0800 Subject: [PATCH 3/3] test: remove the "dart sass as default" test As the upstream has this feature built-in --- packages/@vue/cli-service/__tests__/css.spec.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/packages/@vue/cli-service/__tests__/css.spec.js b/packages/@vue/cli-service/__tests__/css.spec.js index 0492e41a12..a631faeee0 100644 --- a/packages/@vue/cli-service/__tests__/css.spec.js +++ b/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') }) -})