Graham/angular-cli
1
0
Fork 0
mirror of https://github.com/angular/angular-cli.git synced 2025-05-22 23:15:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(@angular-devkit/build-angular): Sass compilation in StackBlitz webcontainers

Browse Source 
When `process.versions.webcontainer` is truthy it means that we are running in a StackBlitz webcontainer. `SassWorkerImplementation` uses `receiveMessageOnPort` Node.js `worker_thread` API to ensure sync behavior which is ~2x faster. However, it is non trivial to support this in a webcontainer and while slower we choose to use `dart-sass` which in Webpack uses the slower async path.
This commit is contained in:
Alan Agius 2021-12-04 07:50:20 +01:00 committed by Filipe Silva
parent 9e22d7a215
commit ac66e400cd
1 changed files with 21 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/angular_devkit/build_angular/src/webpack/configs/styles.ts
View File

@ -107,7 +107,8 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
);
}
const sassImplementation = new SassWorkerImplementation();
const sassImplementation = getSassImplementation();
if (sassImplementation instanceof SassWorkerImplementation) {
extraPlugins.push({
apply(compiler) {
compiler.hooks.shutdown.tap('sass-worker', () => {
@ -115,6 +116,7 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
});
},
});
}
const assetNameTemplate = assetNameTemplateFactory(hashFormat);
@ -404,3 +406,14 @@ export function getStylesConfig(wco: WebpackConfigOptions): Configuration {
plugins: extraPlugins,
};
}
function getSassImplementation(): SassWorkerImplementation | typeof import('sass') {
const { webcontainer } = process.versions as unknown as Record<string, unknown>;
// When `webcontainer` is a truthy it means that we are running in a StackBlitz webcontainer.
// `SassWorkerImplementation` uses `receiveMessageOnPort` Node.js `worker_thread` API to ensure sync behavior which is ~2x faster.
// However, it is non trivial to support this in a webcontainer and while slower we choose to use `dart-sass`
// which in Webpack uses the slower async path.
// We should periodically check with StackBlitz folks (Mark Whitfeld / Dominic Elm) to determine if this workaround is still needed.
return webcontainer ? require('sass') : new SassWorkerImplementation();
}