Merge pull request vuejs#4554 from sodatea/sass-loader-8

Support sass-loader v8

Author: haoqunjiang

docs/guide/css.md

@@ -133,16 +133,17 @@ module.exports = {
       // pass options to sass-loader
       // @/ is an alias to src/
       // so this assumes you have a file named `src/variables.sass`
+      // Note: this option is named as "data" in sass-loader v7
       sass: {
-        data: `@import "~@/variables.sass"`
+        prependData: `@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";`
+        prependData: `@import "~@/variables.scss";`
       },
       // pass Less.js Options to less-loader
       less:{

docs/zh/guide/css.md

@@ -121,15 +121,16 @@ module.exports = {
       sass: {
         // @/ 是 src/ 的别名
         // 所以这里假设你有 `src/variables.sass` 这个文件
-        data: `@import "~@/variables.sass"`
+        // 注意：在 sass-loader v7 中，这个选项名是 "data"
+        prependData: `@import "~@/variables.sass"`
       },
       // 默认情况下 `sass` 选项会同时对 `sass` 和 `scss` 语法同时生效
       // 因为 `scss` 语法在内部也是由 sass-loader 处理的
       // 但是在配置 `data` 选项的时候
       // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
       // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
       scss: {
-        data: `@import "~@/variables.scss";`
+        prependData: `@import "~@/variables.scss";`
       },
       // 给 less-loader 传递 Less.js 相关选项
       less:{

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

@@ -67,7 +67,12 @@ test('default loaders', () => {
     })
   })
   // sass indented syntax
-  expect(findOptions(config, 'sass', 'sass')).toMatchObject({ indentedSyntax: true, sourceMap: false })
+  expect(findOptions(config, 'sass', 'sass')).toMatchObject({
+    sassOptions: {
+      indentedSyntax: true
+    },
+    sourceMap: false
+  })
 })
 
 test('production defaults', () => {
@@ -296,21 +301,30 @@ test('css-loader options', () => {
 })
 
 test('css.loaderOptions', () => {
-  const data = '$env: production;'
+  const prependData = '$env: production;'
   const config = genConfig({
     vue: {
       css: {
         loaderOptions: {
           sass: {
-            data
+            prependData
           }
         }
       }
     }
   })
 
-  expect(findOptions(config, 'scss', 'sass')).toMatchObject({ data, sourceMap: false })
-  expect(findOptions(config, 'sass', 'sass')).toMatchObject({ data, indentedSyntax: true, sourceMap: false })
+  expect(findOptions(config, 'scss', 'sass')).toMatchObject({
+    prependData,
+    sourceMap: false
+  })
+  expect(findOptions(config, 'sass', 'sass')).toMatchObject({
+    prependData,
+    sassOptions: {
+      indentedSyntax: true
+    },
+    sourceMap: false
+  })
 })
 
 test('scss loaderOptions', () => {
@@ -322,24 +336,33 @@ test('scss loaderOptions', () => {
       css: {
         loaderOptions: {
           sass: {
-            sassData
+            prependData: sassData
           },
           scss: {
-            scssData
+            prependData: scssData
           }
         }
       }
     }
   })
 
-  expect(findOptions(config, 'scss', 'sass')).toMatchObject({ scssData, sourceMap: false })
-  expect(findOptions(config, 'sass', 'sass')).toMatchObject({ sassData, indentedSyntax: true, sourceMap: false })
+  expect(findOptions(config, 'scss', 'sass')).toMatchObject({
+    prependData: scssData,
+    sourceMap: false
+  })
+  expect(findOptions(config, 'sass', 'sass')).toMatchObject({
+    prependData: sassData,
+    sassOptions: {
+      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') })
-  expect(findOptions(config, 'sass', 'sass')).toMatchObject({ fiber: require('fibers'), implementation: require('sass') })
+  expect(findOptions(config, 'scss', 'sass')).toMatchObject({ implementation: require('sass') })
+  expect(findOptions(config, 'sass', 'sass')).toMatchObject({ implementation: require('sass') })
 })
 
 test('skip postcss-loader if no postcss config found', () => {

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

@@ -29,15 +29,15 @@ module.exports = (api, options) => {
     const deps = {
       sass: {
         sass: '^1.19.0',
-        'sass-loader': '^7.1.0'
+        'sass-loader': '^8.0.0'
       },
       'node-sass': {
         'node-sass': '^4.12.0',
-        'sass-loader': '^7.1.0'
+        'sass-loader': '^8.0.0'
       },
       'dart-sass': {
         sass: '^1.19.0',
-        'sass-loader': '^7.1.0'
+        'sass-loader': '^8.0.0'
       },
       less: {
         'less': '^3.0.4',

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

@@ -1,5 +1,7 @@
 const fs = require('fs')
 const path = require('path')
+const semver = require('semver')
+const { warn, pauseSpinner, resumeSpinner } = require('@vue/cli-shared-utils')
 
 const findExisting = (context, files) => {
   for (const file of files) {
@@ -15,10 +17,23 @@ 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')
-      defaultSassLoaderOptions.fiber = require('fibers')
+      // since sass-loader 8, fibers will be automatically detected and used
+      if (sassLoaderVersion < 8) {
+        defaultSassLoaderOptions.fiber = require('fibers')
+      }
     } catch (e) {}
 
     const {
@@ -175,13 +190,28 @@ module.exports = (api, rootOptions) => {
       defaultSassLoaderOptions,
       loaderOptions.scss || loaderOptions.sass
     ))
-    createCSSRule('sass', /\.sass$/, 'sass-loader', Object.assign(
-      defaultSassLoaderOptions,
-      {
-        indentedSyntax: true
-      },
-      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('less', /\.less$/, 'less-loader', loaderOptions.less)
     createCSSRule('stylus', /\.styl(us)?$/, 'stylus-loader', Object.assign({
       preferPathResolver: 'webpack'

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

@@ -85,7 +85,7 @@
   "devDependencies": {
     "fibers": ">= 3.1.1 <5.0.0",
     "sass": "^1.19.0",
-    "sass-loader": "^7.1.0",
+    "sass-loader": "^8.0.0",
     "vue": "^2.6.10",
     "vue-router": "^3.0.6",
     "vue-template-compiler": "^2.6.10",

packages/@vue/cli-shared-utils/lib/spinner.js

@@ -3,6 +3,7 @@ const chalk = require('chalk')
 
 const spinner = ora()
 let lastMsg = null
+let isPaused = false
 
 exports.logWithSpinner = (symbol, msg) => {
   if (!msg) {
@@ -36,11 +37,17 @@ exports.stopSpinner = (persist) => {
 }
 
 exports.pauseSpinner = () => {
-  spinner.stop()
+  if (spinner.isSpinning) {
+    spinner.stop()
+    isPaused = true
+  }
 }
 
 exports.resumeSpinner = () => {
-  spinner.start()
+  if (isPaused) {
+    spinner.start()
+    isPaused = false
+  }
 }
 
 exports.failSpinner = (text) => {