feat: make fibers opt-in for dart sass (#3628)

fixes #3429
fixes #3570
fixes #3624

docs/guide/css.md

@@ -12,7 +12,7 @@ You can select pre-processors (Sass/Less/Stylus) when creating the project. If y
 
 ``` bash
 # Sass
-npm install -D sass-loader node-sass
+npm install -D sass-loader sass
 
 # Less
 npm install -D less-loader less
@@ -29,6 +29,14 @@ $color: red;
 </style>
 ```
 
+::: tip A Tip on Sass Performance
+Note that when using Dart Sass, **synchronous compilation is twice as fast as asynchronous compilation** by default, due to the overhead of asynchronous callbacks. To avoid this overhead, you can use the [fibers](https://www.npmjs.com/package/fibers) package to call asynchronous importers from the synchronous code path. To enable this, simply install `fibers` as a project dependency:
+```
+npm install -D fibers
+```
+Please also be aware, as it's a native module, there may be compatibility issues vary on the OS and build environment. In that case, please run `npm uninstall -D fibers` to fix the problem.
+:::
+
 ### Automatic imports
 
 If you want to automatically import files (for colors, variables, mixins...), you can use the [style-resources-loader](https://github.com/yenshih/style-resources-loader). Here is an example for stylus that imports `./src/styles/imports.styl` in every SFC and every stylus files:

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

@@ -43,5 +43,4 @@ test('dart sass', async () => {
 
   expect(files['src/App.vue']).toMatch('<style lang="scss">')
   expect(pkg).toHaveProperty(['devDependencies', 'sass'])
-  expect(pkg).toHaveProperty(['devDependencies', 'fibers'])
 })

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

@@ -46,7 +46,6 @@ module.exports = (api, options) => {
         'sass-loader': '^7.1.0'
       },
       'dart-sass': {
-        fibers: '^3.1.1',
         sass: '^1.17.2',
         'sass-loader': '^7.1.0'
       },