nav tabs on admin dashboard

node_modules/sass-loader/lib/importsToResolve.js

@@ -1,58 +1,60 @@
 "use strict";
 
 const path = require("path");
+const utils = require("loader-utils");
 
-// libsass uses this precedence when importing files without extension
-const extPrecedence = [".scss", ".sass", ".css"];
+const matchModuleImport = /^~([^\/]+|@[^\/]+[\/][^\/]+)$/;
 
 /**
  * When libsass tries to resolve an import, it uses a special algorithm.
  * Since the sass-loader uses webpack to resolve the modules, we need to simulate that algorithm. This function
- * returns an array of import paths to try.
+ * returns an array of import paths to try. The last entry in the array is always the original url
+ * to enable straight-forward webpack.config aliases.
  *
- * @param {string} request
+ * @param {string} url
  * @returns {Array<string>}
  */
-function importsToResolve(request) {
-    // libsass' import algorithm works like this:
-    // In case there is no file extension...
-    //   - Prefer modules starting with '_'.
-    //   - File extension precedence: .scss, .sass, .css.
-    // In case there is a file extension...
-    //   - If the file is a CSS-file, do not include it all, but just link it via @import url().
-    //   - The exact file name must match (no auto-resolving of '_'-modules).
-
+function importsToResolve(url) {
+    const request = utils.urlToRequest(url);
     // Keep in mind: ext can also be something like '.datepicker' when the true extension is omitted and the filename contains a dot.
     // @see https://github.com/webpack-contrib/sass-loader/issues/167
     const ext = path.extname(request);
-    const basename = path.basename(request);
-    const dirname = path.dirname(request);
-    const startsWithUnderscore = basename.charAt(0) === "_";
-    const hasCssExt = ext === ".css";
-    const hasSassExt = ext === ".scss" || ext === ".sass";
 
-    // a module import is an identifier like 'bootstrap-sass'
-    // We also need to check for dirname since it might also be a deep import like 'bootstrap-sass/something'
-    let isModuleImport = request.charAt(0) !== "." && dirname === ".";
-
-    if (dirname.charAt(0) === "@") {
-        // Check whether it is a deep import from scoped npm package
-        // (i.e. @pkg/foo/file), if so, process import as file import;
-        // otherwise, if we import from root npm scoped package (i.e. @pkg/foo)
-        // process import as a module import.
-        isModuleImport = !(dirname.indexOf("/") > -1);
+    if (matchModuleImport.test(url)) {
+        return [request, url];
     }
 
-    return (isModuleImport && [request]) || // Do not modify module imports
-        (hasCssExt && []) || // Do not import css files
-        (hasSassExt && [request]) || // Do not modify imports with explicit extensions
-        (startsWithUnderscore ? [] : extPrecedence) // Do not add underscore imports if there is already an underscore
-            .map(ext => "_" + basename + ext)
-            .concat(
-                extPrecedence.map(ext => basename + ext)
-            ).map(
-                file => dirname + "/" + file // No path.sep required here, because imports inside SASS are usually with /
-            );
+    // libsass' import algorithm works like this:
+
+    // In case there is a file extension...
+    //   - If the file is a CSS-file, do not include it all, but just link it via @import url().
+    //   - The exact file name must match (no auto-resolving of '_'-modules).
+    if (ext === ".css") {
+        return [];
+    }
+    if (ext === ".scss" || ext === ".sass") {
+        return [request, url];
+    }
+
+    // In case there is no file extension...
+    //   - Prefer modules starting with '_'.
+    //   - File extension precedence: .scss, .sass, .css.
+    const basename = path.basename(request);
+
+    if (basename.charAt(0) === "_") {
+        return [
+            `${ request }.scss`, `${ request }.sass`, `${ request }.css`,
+            url
+        ];
+    }
+
+    const dirname = path.dirname(request);
+
+    return [
+        `${ dirname }/_${ basename }.scss`, `${ dirname }/_${ basename }.sass`, `${ dirname }/_${ basename }.css`,
+        `${ request }.scss`, `${ request }.sass`, `${ request }.css`,
+        url
+    ];
 }
 
 module.exports = importsToResolve;