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/__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('