From 7728c53ae181f9725147a66fcbd6c0e812b2073f Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Wed, 13 Mar 2019 15:36:27 +0800 Subject: [PATCH 1/2] feat: make `fibers` opt-in for dart sass fixes #3429 fixes #3570 fixes #3624 --- docs/guide/css.md | 10 +++++++++- packages/@vue/cli-service/generator/index.js | 1 - 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/docs/guide/css.md b/docs/guide/css.md index 1cca315162..be2878c7d7 100644 --- a/docs/guide/css.md +++ b/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; ``` +::: 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: diff --git a/packages/@vue/cli-service/generator/index.js b/packages/@vue/cli-service/generator/index.js index e10591fa5d..edf9ca4e05 100644 --- a/packages/@vue/cli-service/generator/index.js +++ b/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' }, From 2d3b5aa4b23a9761c1e6a565aef3084de16b3898 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Wed, 13 Mar 2019 16:08:42 +0800 Subject: [PATCH 2/2] test: remove test for fibers --- packages/@vue/cli-service/__tests__/generator.spec.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/@vue/cli-service/__tests__/generator.spec.js b/packages/@vue/cli-service/__tests__/generator.spec.js index c04283884a..33fa94400f 100644 --- a/packages/@vue/cli-service/__tests__/generator.spec.js +++ b/packages/@vue/cli-service/__tests__/generator.spec.js @@ -43,5 +43,4 @@ test('dart sass', async () => { expect(files['src/App.vue']).toMatch('