@nx/webpack 20.5.0-beta.4 → 20.5.0-beta.5

package/migrations.json

@@ -35,6 +35,19 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "20.5.0": {
+      "version": "20.5.0-beta.3",
+      "packages": {
+        "sass-loader": {
+          "version": "^16.0.4",
+          "alwaysAddToPackageJson": false
+        },
+        "sass-embedded": {
+          "version": "^1.83.4",
+          "alwaysAddToPackageJson": true
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/webpack",
-  "version": "20.5.0-beta.4",
+  "version": "20.5.0-beta.5",
   "private": false,
   "description": "The Nx Plugin for Webpack contains executors and generators that support building applications using Webpack.",
   "repository": {
@@ -51,8 +51,9 @@
     "postcss-import": "~14.1.0",
     "postcss-loader": "^6.1.1",
     "rxjs": "^7.8.0",
-    "sass": "^1.42.1",
-    "sass-loader": "^12.2.0",
+    "sass": "^1.85.0",
+    "sass-embedded": "^1.83.4",
+    "sass-loader": "^16.0.4",
     "source-map-loader": "^5.0.0",
     "style-loader": "^3.3.0",
     "stylus": "^0.64.0",
@@ -65,8 +66,8 @@
     "webpack-dev-server": "^5.0.4",
     "webpack-node-externals": "^3.0.0",
     "webpack-subresource-integrity": "^5.1.0",
-    "@nx/devkit": "20.5.0-beta.4",
-    "@nx/js": "20.5.0-beta.4"
+    "@nx/devkit": "20.5.0-beta.5",
+    "@nx/js": "20.5.0-beta.5"
   },
   "publishConfig": {
     "access": "public"

package/src/executors/webpack/lib/normalize-options.js

@@ -16,6 +16,7 @@ function normalizeOptions(options, root, projectRoot, sourceRoot) {
         outputFileName: options.outputFileName ?? 'main.js',
         webpackConfig: normalizePluginPath(options.webpackConfig, root),
         fileReplacements: (0, normalize_options_1.normalizeFileReplacements)(root, options.fileReplacements),
+        sassImplementation: options.sassImplementation ?? 'sass',
         optimization: typeof options.optimization !== 'object'
             ? {
                 scripts: options.optimization,

package/src/executors/webpack/schema.d.ts

@@ -81,6 +81,7 @@ export interface WebpackExecutorOptions {
   index?: string;
   postcssConfig?: string;
   scripts?: Array<ExtraEntryPointClass | string>;
+  sassImplementation?: 'sass' | 'sass-embedded';
   stylePreprocessorOptions?: any;
   styles?: Array<ExtraEntryPointClass | string>;
   subresourceIntegrity?: boolean;

package/src/executors/webpack/schema.json

@@ -144,6 +144,12 @@
       },
       "additionalProperties": false
     },
+    "sassImplementation": {
+      "type": "string",
+      "description": "The implementation of the SASS compiler to use. Can be either `sass` or `sass-embedded`. Defaults to `sass-embedded`.",
+      "enum": ["sass", "sass-embedded"],
+      "default": "sass"
+    },
     "optimization": {
       "description": "Enables optimization of the build output.",
       "oneOf": [

package/src/plugins/nx-webpack-plugin/lib/apply-web-config.js

@@ -56,6 +56,8 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
     const globalStylePaths = [];
     // Determine hashing format.
     const hashFormat = (0, hash_format_1.getOutputHashFormat)(options.outputHashing);
+    const sassOptions = options.stylePreprocessorOptions?.sassOptions;
+    const lessOptions = options.stylePreprocessorOptions?.lessOptions;
     const includePaths = [];
     if (options?.stylePreprocessorOptions?.includePaths?.length > 0) {
         options.stylePreprocessorOptions.includePaths.forEach((includePath) => includePaths.push(path.resolve(options.root, includePath)));
@@ -97,11 +99,15 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                 {
                     loader: require.resolve('sass-loader'),
                     options: {
-                        implementation: require('sass'),
+                        api: 'modern-compiler',
+                        implementation: options.sassImplementation === 'sass-embedded'
+                            ? require.resolve('sass-embedded')
+                            : require.resolve('sass'),
                         sassOptions: {
                             fiber: false,
                             precision: 8,
                             includePaths,
+                            ...(sassOptions ?? {}),
                         },
                     },
                 },
@@ -117,6 +123,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                     options: {
                         lessOptions: {
                             paths: includePaths,
+                            ...(lessOptions ?? {}),
                         },
                     },
                 },
@@ -152,13 +159,17 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                 {
                     loader: require.resolve('sass-loader'),
                     options: {
-                        implementation: require('sass'),
+                        api: 'modern-compiler',
+                        implementation: options.sassImplementation === 'sass-embedded'
+                            ? require.resolve('sass-embedded')
+                            : require.resolve('sass'),
                         sourceMap: !!options.sourceMap,
                         sassOptions: {
                             fiber: false,
                             // bootstrap-sass requires a minimum precision of 8
                             precision: 8,
                             includePaths,
+                            ...(sassOptions ?? {}),
                         },
                     },
                 },
@@ -176,6 +187,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                         lessOptions: {
                             javascriptEnabled: true,
                             ...lessPathOptions,
+                            ...(lessOptions ?? {}),
                         },
                     },
                 },
@@ -212,13 +224,17 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                 {
                     loader: require.resolve('sass-loader'),
                     options: {
-                        implementation: require('sass'),
+                        api: 'modern-compiler',
+                        implementation: options.sassImplementation === 'sass-embedded'
+                            ? require.resolve('sass-embedded')
+                            : require.resolve('sass'),
                         sourceMap: !!options.sourceMap,
                         sassOptions: {
                             fiber: false,
                             // bootstrap-sass requires a minimum precision of 8
                             precision: 8,
                             includePaths,
+                            ...(sassOptions ?? {}),
                         },
                     },
                 },
@@ -236,6 +252,7 @@ function applyWebConfig(options, config = {}, { useNormalizedEntry, } = {}) {
                         lessOptions: {
                             javascriptEnabled: true,
                             ...lessPathOptions,
+                            ...(lessOptions ?? {}),
                         },
                     },
                 },

package/src/plugins/nx-webpack-plugin/lib/normalize-options.js

@@ -85,6 +85,7 @@ function normalizeOptions(options) {
         target: combinedPluginAndMaybeExecutorOptions.target,
         targetName,
         vendorChunk: combinedPluginAndMaybeExecutorOptions.vendorChunk ?? !isProd,
+        sassImplementation: combinedPluginAndMaybeExecutorOptions.sassImplementation ?? 'sass',
     };
 }
 function normalizeAssets(assets, root, sourceRoot, projectRoot, resolveRelativePathsToProjectRoot = true) {

package/src/plugins/nx-webpack-plugin/nx-app-webpack-plugin-options.d.ts

@@ -185,7 +185,11 @@ export interface NxAppWebpackPluginOptions {
     /**
      * Options for the style preprocessor. e.g. `{ "includePaths": [] }` for SASS.
      */
-    stylePreprocessorOptions?: any;
+    stylePreprocessorOptions?: {
+        includePaths?: string[];
+        sassOptions?: Record<string, any>;
+        lessOptions?: Record<string, any>;
+    };
     /**
      * External stylesheets that will be included with the application.
      */
@@ -206,6 +210,10 @@ export interface NxAppWebpackPluginOptions {
      * Use tsconfig-paths-webpack-plugin to resolve modules using paths in the tsconfig file.
      */
     useTsconfigPaths?: boolean;
+    /**
+     * The implementation of the SASS compiler to use. Can be either `sass` or `sass-embedded`. Defaults to `sass-embedded`.
+     */
+    sassImplementation?: 'sass' | 'sass-embedded';
     /**
      * Generate a separate vendor chunk for 3rd party packages.
      */

package/src/utils/with-web.d.ts

@@ -8,8 +8,13 @@ export interface WithWebOptions {
     generateIndexHtml?: boolean;
     index?: string;
     postcssConfig?: string;
+    sassImplementation?: 'sass' | 'sass-embedded';
     scripts?: Array<ExtraEntryPointClass | string>;
-    stylePreprocessorOptions?: any;
+    stylePreprocessorOptions?: {
+        includePaths?: string[];
+        sassOptions?: Record<string, any>;
+        lessOptions?: Record<string, any>;
+    };
     styles?: Array<ExtraEntryPointClass | string>;
     subresourceIntegrity?: boolean;
     ssr?: boolean;