diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts index 7c959f7fa08a..6cdf9d20b601 100644 --- a/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts +++ b/packages/angular_devkit/build_angular/src/webpack/configs/styles.ts @@ -108,23 +108,14 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio ); } - let sassImplementation: SassWorkerImplementation | undefined; - try { - sassImplementation = require('node-sass'); - wco.logger.warn( - `'node-sass' usage is deprecated and will be removed in a future major version. ` + - `To opt-out of the deprecated behaviour and start using 'sass' uninstall 'node-sass'.`, - ); - } catch { - sassImplementation = new SassWorkerImplementation(); - extraPlugins.push({ - apply(compiler) { - compiler.hooks.shutdown.tap('sass-worker', () => { - sassImplementation?.close(); - }); - }, - }); - } + const sassImplementation = new SassWorkerImplementation(); + extraPlugins.push({ + apply(compiler) { + compiler.hooks.shutdown.tap('sass-worker', () => { + sassImplementation?.close(); + }); + }, + }); const assetNameTemplate = assetNameTemplateFactory(hashFormat); diff --git a/tests/legacy-cli/e2e/tests/build/styles/node-sass.ts b/tests/legacy-cli/e2e/tests/build/styles/node-sass.ts deleted file mode 100644 index b6d8a827e58f..000000000000 --- a/tests/legacy-cli/e2e/tests/build/styles/node-sass.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { - deleteFile, - expectFileToMatch, - replaceInFile, - writeMultipleFiles, -} from '../../../utils/fs'; -import { installPackage } from '../../../utils/packages'; -import { ng, silentExec } from '../../../utils/process'; -import { updateJsonFile } from '../../../utils/project'; -import { expectToFail } from '../../../utils/utils'; - - -export default async function () { - if (process.platform.startsWith('win')) { - return; - } - - await writeMultipleFiles({ - 'src/styles.scss': '@import \'./imported-styles.scss\';\nbody { background-color: blue; }', - 'src/imported-styles.scss': 'p { background-color: red; }', - 'src/app/app.component.scss': '.outer { .inner { background: #fff; } }', - }); - await deleteFile('src/app/app.component.css'); - await updateJsonFile('angular.json', workspaceJson => { - const appArchitect = workspaceJson.projects['test-project'].architect; - appArchitect.build.options.styles = [ - { input: 'src/styles.scss' }, - ]; - }); - await replaceInFile('src/app/app.component.ts', './app.component.css', './app.component.scss'); - - await silentExec('rm', '-rf', 'node_modules/node-sass'); - await silentExec('rm', '-rf', 'node_modules/sass'); - await expectToFail(() => ng('build', '--extract-css', '--source-map', '--configuration=development')); - - await installPackage('node-sass'); - await silentExec('rm', '-rf', 'node_modules/sass'); - await ng('build', '--extract-css', '--source-map', '--configuration=development'); - - await expectFileToMatch('dist/test-project/styles.css', /body\s*{\s*background-color: blue;\s*}/); - await expectFileToMatch('dist/test-project/styles.css', /p\s*{\s*background-color: red;\s*}/); - await expectToFail(() => expectFileToMatch('dist/test-project/styles.css', '"mappings":""')); - await expectFileToMatch('dist/test-project/main.js', /.outer.*.inner.*background:\s*#[fF]+/); - - await installPackage('node-gyp'); - await installPackage('fibers'); - await installPackage('sass'); - await silentExec('rm', '-rf', 'node_modules/node-sass'); - await ng('build', '--extract-css', '--source-map', '--configuration=development'); - - await expectFileToMatch('dist/test-project/styles.css', /body\s*{\s*background-color: blue;\s*}/); - await expectFileToMatch('dist/test-project/styles.css', /p\s*{\s*background-color: red;\s*}/); - await expectToFail(() => expectFileToMatch('dist/test-project/styles.css', '"mappings":""')); - await expectFileToMatch('dist/test-project/main.js', /.outer.*.inner.*background:\s*#[fF]+/); -}