[UI] fix build for 0.12 where relative paths cause issues for theming (…

…#2336)

Using relative links to node_modules in our build works fine for our build, but if someone tries to build a theme and imports our file, the file paths are no longer correct. We had the tilde importer in the past, but it doesn't seem to work the same without additional webpack functionality. This will require anyone building a custom theme to add the `--include-path=node_modules` to their build as well.

Signed-off-by: Jeremy Wilken <[email protected]>

angular.json

@@ -33,6 +33,9 @@
               "src/clr-icons/clr-icons.scss",
               "node_modules/prismjs/themes/prism-solarizedlight.css"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["node_modules"]
+            },
             "scripts": [
               "node_modules/@webcomponents/custom-elements/custom-elements.min.js",
               "node_modules/prismjs/prism.js",
@@ -134,6 +137,9 @@
               "node_modules/prismjs/themes/prism-solarizedlight.css",
               "src/ks-app/src/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["node_modules"]
+            },
             "scripts": [
               "node_modules/@webcomponents/custom-elements/custom-elements.min.js",
               "node_modules/prismjs/prism.js",

karma.conf.js

@@ -111,6 +111,12 @@ module.exports = function(karma) {
       useLegacyStyle: true,
       useCompactStyle: true,
     },
+    scssPreprocessor: {
+      options: {
+        sourceMap: true,
+        includePaths: ['node_modules'],
+      },
+    },
     coverageIstanbulReporter: {
       dir: './reports/coverage/',
       fixWebpackSourcePaths: true,

package.json

@@ -9,7 +9,7 @@
         "build:icons:package": "cpy ./npm/clr-icons/package.json ./npm/clr-icons/README.md ./dist/clr-icons/; replace '@VERSION' $npm_package_version ./dist/clr-icons/package.json",
         "build:icons:svg": "node ./scripts/clr-icons-svg.js",
         "build:icons": "npm-run-all build:icons:css build:icons:optimize build:icons:web build:icons:package build:icons:svg",
-        "build:ui:css": "node-sass --source-map=true --precision=6 --indentedSyntax=true ./src/clr-angular/main.scss ./dist/clr-ui/clr-ui.css; node-sass --source-map=true --precision=6 --indentedSyntax=true ./src/clr-angular/dark-theme.scss ./dist/clr-ui/clr-ui-dark.css",
+        "build:ui:css": "node-sass --include-path=node_modules --source-map=true --precision=6 --indentedSyntax=true ./src/clr-angular/main.scss ./dist/clr-ui/clr-ui.css; node-sass --include-path=node_modules --source-map=true --precision=6 --indentedSyntax=true ./src/clr-angular/dark-theme.scss ./dist/clr-ui/clr-ui-dark.css",
         "build:ui:prefix": "postcss ./dist/clr-ui/clr-ui.css -o ./dist/clr-ui/clr-ui.css; postcss ./dist/clr-ui/clr-ui-dark.css -o ./dist/clr-ui/clr-ui-dark.css",
         "build:ui:src": "cpy --parents --cwd='src/clr-angular/' '**/*.scss' ../../dist/clr-ui/src/",
         "build:ui:optimize": "csso ./dist/clr-ui/clr-ui.css ./dist/clr-ui/clr-ui.min.css --map file; csso ./dist/clr-ui/clr-ui-dark.css ./dist/clr-ui/clr-ui-dark.min.css --map file;",

src/clr-angular/utils/_components.clarity.scss

@@ -7,13 +7,13 @@
 
 // Bootstrap 4 Dependencies - Begin Part 2
 // NOTE: These are here b/c they need to be overwritable for the $grid-breakpoints map in a theme.
-@import '../../../node_modules/bootstrap/scss/media';
-@import '../../../node_modules/bootstrap/scss/utilities';
-@import '../../../node_modules/bootstrap/scss/images';
-@import '../../../node_modules/bootstrap/scss/list-group';
-@import '../../../node_modules/bootstrap/scss/close';
-@import '../../../node_modules/bootstrap/scss/grid';
-@import '../../../node_modules/bootstrap/scss/responsive-embed';
+@import 'bootstrap/scss/media';
+@import 'bootstrap/scss/utilities';
+@import 'bootstrap/scss/images';
+@import 'bootstrap/scss/list-group';
+@import 'bootstrap/scss/close';
+@import 'bootstrap/scss/grid';
+@import 'bootstrap/scss/responsive-embed';
 
 // Clarity scss maps w/ overridable variables per component
 @import 'maps.clarity';

src/clr-angular/utils/_dependencies.clarity.scss

@@ -6,9 +6,9 @@
 @import '../utils/bs4-grid-breakpoint-overrides.clarity';
 
 // Bootstrap 4 Dependencies - Begin Part 1
-@import '../../../node_modules/bootstrap/scss/variables';
-@import '../../../node_modules/bootstrap/scss/mixins';
-@import '../../../node_modules/bootstrap/scss/normalize';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/normalize';
 //Bootstrap 4 Dependencies - End Part 1
 
 // Vendor