fix: add default sass implementation

package.json

@@ -65,7 +65,6 @@
     "puppeteer": "^5.5.0",
     "react-test-renderer": "^16.13.1",
     "rimraf": "^3.0.0",
-    "sass": "^1.32.0",
     "semver": "^7.3.2",
     "simple-git": "^1.132.0",
     "ts-jest": "^26.0.0",

packages/build-app-helpers/src/getSassImplementation.ts

@@ -1,12 +1,15 @@
-function getDefaultSassImplementation() {
-  let sassImplPkg = 'sass';
+function resolvePkgPath(pkg, resolvePath?: string): string {
+  return resolvePath ? require.resolve(pkg, { paths: [resolvePath] }) : require.resolve(pkg);
+}
 
+function getDefaultSassImplementation(defaultSassImplPkg: string, resolvePath?: string) {
+  let sassImplPkg = defaultSassImplPkg;
+  const fallbackSassImplPkg = defaultSassImplPkg === 'sass' ? 'sass' : 'node-sass';
   try {
-    require.resolve('sass');
+    sassImplPkg = resolvePkgPath(defaultSassImplPkg, resolvePath);
   } catch (error) {
     try {
-      require.resolve('node-sass');
-      sassImplPkg = 'node-sass';
+      sassImplPkg = resolvePkgPath(fallbackSassImplPkg, resolvePath);
     } catch (ignoreError) {
       sassImplPkg = 'sass';
     }
@@ -15,11 +18,13 @@ function getDefaultSassImplementation() {
   return require(sassImplPkg);
 }
 
-function getSassImplementation() {
+function getSassImplementation(defaultSassImplPkg = 'sass', resolvePath?: string) {
   try {
-    return getDefaultSassImplementation();
+    return getDefaultSassImplementation(defaultSassImplPkg, resolvePath);
   } catch (error) {
     console.error('Run `npm install sass` or `yarn add sass` inside your workspace.');
+    // exit process when sass require is failed
+    process.exit(1);
   }
   return null;
 }

packages/build-scripts-config/package.json

@@ -36,6 +36,7 @@
     "postcss-preset-env": "^6.7.0",
     "postcss-safe-parser": "^4.0.1",
     "regenerator-runtime": "^0.13.3",
+    "sass": "^1.32.0",
     "sass-loader": "^10.0.0",
     "terser-webpack-plugin": "^2.3.1",
     "time-fix-plugin": "^2.0.6",

packages/build-user-config/src/userConfig/sassLoaderOptions.js

@@ -1,18 +1,28 @@
-module.exports = (config, sassLoaderOptions) => {
-  if (sassLoaderOptions) {
-    [
-      'scss',
-      'scss-module',
-    ].forEach(rule => {
-      if (config.module.rules.get(rule)) {
-        config.module
-          .rule(rule)
-          .use('sass-loader')
-          .tap((options) => ({
-            ...options,
-            ...sassLoaderOptions,
-          }));
-      }
-    });
+const { getSassImplementation } = require('@builder/app-helpers');
+
+module.exports = (config, customOptions, context) => {
+  const { pkg, rootDir } = context;
+  let sassLoaderOptions = {};
+  let defaultSassImplPkg = 'sass';
+  if ((pkg.dependencies && pkg.dependencies['node-sass']) || (pkg.devDependencies && pkg.devDependencies['node-sass'])) {
+    defaultSassImplPkg = 'node-sass';
   }
+  sassLoaderOptions.implementation = getSassImplementation(defaultSassImplPkg, rootDir);
+  if (customOptions) {
+    sassLoaderOptions = { ...sassLoaderOptions, ...customOptions };
+  }
+  [
+    'scss',
+    'scss-module',
+  ].forEach(rule => {
+    if (config.module.rules.get(rule)) {
+      config.module
+        .rule(rule)
+        .use('sass-loader')
+        .tap((options) => ({
+          ...options,
+          ...sassLoaderOptions,
+        }));
+    }
+  });
 };

yarn.lock

@@ -8900,7 +8900,7 @@ html-tags@^2.0.0:
   resolved "https://registry.npm.taobao.org/html-tags/download/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
   integrity sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=
 
-html-webpack-plugin@^4.0.0, html-webpack-plugin@^4.3.0:
+html-webpack-plugin@^4.0.0:
   version "4.5.1"
   resolved "https://registry.npm.taobao.org/html-webpack-plugin/download/html-webpack-plugin-4.5.1.tgz?cache=0&sync_timestamp=1611174511023&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fhtml-webpack-plugin%2Fdownload%2Fhtml-webpack-plugin-4.5.1.tgz#40aaf1b5cb78f2f23a83333999625c20929cda65"
   integrity sha1-QKrxtct48vI6gzM5mWJcIJKc2mU=