Skip to content

Commit 6f38c77

Browse files
clydinhansl
authored andcommitted
feat(@angular-devkit/build-angular): support dart-sass for SASS/SCSS
1 parent 2d84436 commit 6f38c77

File tree

4 files changed

+71
-4
lines changed

4 files changed

+71
-4
lines changed

packages/angular_devkit/build_angular/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
"postcss-url": "^7.3.2",
3838
"raw-loader": "^0.5.1",
3939
"rxjs": "^6.0.0",
40-
"sass-loader": "~6.0.7",
40+
"sass-loader": "^7.1.0",
4141
"semver": "^5.5.0",
4242
"source-map-support": "^0.5.0",
4343
"source-map-loader": "^0.2.3",

packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/styles.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -200,13 +200,27 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
200200
}
201201
}
202202

203+
let dartSass: {} | undefined;
204+
try {
205+
dartSass = require('sass');
206+
} catch { }
207+
208+
let fiber: {} | undefined;
209+
if (dartSass) {
210+
try {
211+
fiber = require('fibers');
212+
} catch { }
213+
}
214+
203215
// set base rules to derive final rules from
204216
const baseRules: webpack.Rule[] = [
205217
{ test: /\.css$/, use: [] },
206218
{
207219
test: /\.scss$|\.sass$/, use: [{
208220
loader: 'sass-loader',
209221
options: {
222+
implementation: dartSass,
223+
fiber,
210224
sourceMap: cssSourceMap,
211225
// bootstrap-sass requires a minimum precision of 8
212226
precision: 8,
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import {
2+
deleteFile,
3+
expectFileToMatch,
4+
replaceInFile,
5+
writeMultipleFiles,
6+
} from '../../../utils/fs';
7+
import { ng, silentExec, silentNpm } from '../../../utils/process';
8+
import { updateJsonFile } from '../../../utils/project';
9+
import { expectToFail } from '../../../utils/utils';
10+
11+
12+
export default async function () {
13+
if (process.platform.startsWith('win')) {
14+
return;
15+
}
16+
17+
await writeMultipleFiles({
18+
'src/styles.scss': '@import \'./imported-styles.scss\';\nbody { background-color: blue; }',
19+
'src/imported-styles.scss': 'p { background-color: red; }',
20+
'src/app/app.component.scss': '.outer { .inner { background: #fff; } }',
21+
});
22+
await deleteFile('src/app/app.component.css');
23+
await updateJsonFile('angular.json', workspaceJson => {
24+
const appArchitect = workspaceJson.projects['test-project'].targets;
25+
appArchitect.build.options.styles = [
26+
{ input: 'src/styles.scss' },
27+
];
28+
});
29+
await replaceInFile('src/app/app.component.ts', './app.component.css', './app.component.scss');
30+
31+
await silentExec('rm', '-rf', 'node_modules/node-sass');
32+
await expectToFail(() => ng('build', '--extract-css', '--source-map'));
33+
34+
await silentNpm('install', 'sass');
35+
await silentExec('rm', '-rf', 'node_modules/node-sass');
36+
await ng('build', '--extract-css', '--source-map');
37+
38+
await expectFileToMatch('dist/test-project/styles.css', /body\s*{\s*background-color: blue;\s*}/);
39+
await expectFileToMatch('dist/test-project/styles.css', /p\s*{\s*background-color: red;\s*}/);
40+
await expectToFail(() => expectFileToMatch('dist/test-project/styles.css', '"mappings":""'));
41+
await expectFileToMatch('dist/test-project/main.js', /.outer.*.inner.*background:\s*#[fF]+/);
42+
43+
await silentNpm('install', 'node-gyp');
44+
await silentNpm('install', 'fibers');
45+
await silentExec('rm', '-rf', 'node_modules/node-sass');
46+
await ng('build', '--extract-css', '--source-map');
47+
48+
await expectFileToMatch('dist/test-project/styles.css', /body\s*{\s*background-color: blue;\s*}/);
49+
await expectFileToMatch('dist/test-project/styles.css', /p\s*{\s*background-color: red;\s*}/);
50+
await expectToFail(() => expectFileToMatch('dist/test-project/styles.css', '"mappings":""'));
51+
await expectFileToMatch('dist/test-project/main.js', /.outer.*.inner.*background:\s*#[fF]+/);
52+
}

yarn.lock

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6157,15 +6157,16 @@ sass-graph@^2.2.4:
61576157
scss-tokenizer "^0.2.3"
61586158
yargs "^7.0.0"
61596159

6160-
sass-loader@~6.0.7:
6161-
version "6.0.7"
6162-
resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-6.0.7.tgz#dd2fdb3e7eeff4a53f35ba6ac408715488353d00"
6160+
sass-loader@^7.1.0:
6161+
version "7.1.0"
6162+
resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-7.1.0.tgz#16fd5138cb8b424bf8a759528a1972d72aad069d"
61636163
dependencies:
61646164
clone-deep "^2.0.1"
61656165
loader-utils "^1.0.1"
61666166
lodash.tail "^4.1.1"
61676167
neo-async "^2.5.0"
61686168
pify "^3.0.0"
6169+
semver "^5.5.0"
61696170

61706171
saucelabs@^1.5.0:
61716172
version "1.5.0"

0 commit comments

Comments
 (0)