From becc8eb0e7d9f6f33519fb1d08693317d37601b0 Mon Sep 17 00:00:00 2001 From: Jeremy Wilken Date: Wed, 6 Jun 2018 13:45:04 -0500 Subject: [PATCH] [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 --- angular.json | 6 ++++++ karma.conf.js | 6 ++++++ package.json | 2 +- src/clr-angular/utils/_components.clarity.scss | 14 +++++++------- src/clr-angular/utils/_dependencies.clarity.scss | 6 +++--- 5 files changed, 23 insertions(+), 11 deletions(-) diff --git a/angular.json b/angular.json index 23690a30fa..a672c3eeb4 100644 --- a/angular.json +++ b/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", diff --git a/karma.conf.js b/karma.conf.js index 065bb9b8c5..1f77bdef0e 100644 --- a/karma.conf.js +++ b/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, diff --git a/package.json b/package.json index d64f6402ad..f78651768e 100644 --- a/package.json +++ b/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;", diff --git a/src/clr-angular/utils/_components.clarity.scss b/src/clr-angular/utils/_components.clarity.scss index 713c9e8c03..477a83c4b6 100644 --- a/src/clr-angular/utils/_components.clarity.scss +++ b/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'; diff --git a/src/clr-angular/utils/_dependencies.clarity.scss b/src/clr-angular/utils/_dependencies.clarity.scss index e7a0095a4a..d5e692c063 100644 --- a/src/clr-angular/utils/_dependencies.clarity.scss +++ b/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