truly-ui icon indicating copy to clipboard operation
truly-ui copied to clipboard

Theming: Import basic theme builder error

Open Saidabbos opened this issue 6 years ago • 6 comments

When I import ~truly-ui/css/theming/builders/basic/index in my style.scss , I'm getting error like this

ERROR in ./src/styles.scss (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import "../../../accordion/accordion-theme";
@import "../../../accordion/parts/accordion-item/accordion-item-theme";
@import "../../../autocomplete/autocomplete-theme";
@import "../../../avatar/avatar-theme";
@import "../../../badge/badge-theme";
@import "../../../button/button-theme";
@import "../../../buttongroup/buttongroup-theme";
@import "../../../dropdownicon/dropdownicon-theme";
@import "../../../calendar/calendar-theme";
@import "../../../chatlist/chatlist-theme";
@import "../../../checkbox/checkbox-theme";
@import "../../../contextmenu/contextmenu-theme";
@import "../../../colorpicker/colorpicker-theme";
@import "../../../colorpicker/parts/colorpicker-content/colorpicker-content-theme";
@import "../../../colorpicker/parts/colorpicker-input/colorpicker-input-theme";
@import "../../../core/core";
@import "../../../datatable/datatable-theme";
@import "../../../date/date-theme";
@import "../../../dialog/dialog-error/dialog-error-theme";
@import "../../../dropdownlist/dropdownlist-theme";
@import "../../../editor/editor-theme";
@import "../../../form/form-theme";
@import "../../../input/input-theme";
@import "../../../listbox/listbox-theme";
@import "../../../popupmenu/popupmenu-theme";
@import "../../../menu/menu-theme";
@import "../../../menu/parts/simple/simple-sub-menu-theme";
@import "../../../menu/parts/advanced/parts/advanced-sub-menu-theme";
@import "../../../menu/parts/advanced/advanced-root-menu-theme";
@import "../../../modal/modal-theme";
@import "../../../modal/addons/modal-toolbar/modal-toolbar-theme";
@import "../../../multiselect/multiselect-theme";
@import "../../../navigator/navigator-theme";
@import "../../../overlaylist/overlaylist-theme";
@import "../../../overlaylist/list-item/list-item-theme";
@import "../../../overlaypanel/overlay-panel-theme";
@import "../../../panelgroup/panelgroup-theme";
@import "../../../progressbar/progressbar-theme";
@import "../../../permissions/permissions-theme";
@import "../../../radiobutton/radiobutton-theme";
@import "../../../splitbutton/splitbutton-theme";
@import "../../../stopwatch/stopwatch-theme";
@import "../../../switch/switch-theme";
@import "../../../tabcontrol/tabcontrol-theme";
@import "../../../textarea/textarea-theme";
@import "../../../timepicker/timepicker-theme";
@import "../../../time-available-picker/time-available-picker-theme";
@import "../../../internals/components/tag/tag-theme";
@import "../../../toaster/parts/toaster-theme";
@import "../../../toolbar/toolbar-theme";
@import "../../../clockpicker/clockpicker-theme";
@import "../../../timeline/timeline-theme";
@import "../../../timeline/parts/timeline-item/timeline-item-theme";

@mixin truly-all-components($theme) {
  @include tl-accordion-theme($theme);
  @include tl-accordion-item-theme($theme);
  @include tl-autocomplete-theme($theme);
  @include tl-avatar-theme($theme);
  @include tl-badge-theme($theme);
  @include tl-button-group-theme($theme);
  @include tl-button-theme($theme);
  @include tl-dropdown-icon-theme($theme);
  @include tl-calendar-theme($theme);
  @include tl-chatlist-theme($theme);
  @include tl-checkbox-theme($theme);
  @include tl-contextmenu-theme($theme);
  @include tl-colorpicker-theme($theme);
  @include tl-colorpicker-content-theme($theme);
  @include tl-colorpicker-input-theme($theme);
  @include tl-core-theme($theme);
  @include tl-date-theme($theme);
  @include tl-datatable-theme($theme);
  @include tl-dialog-error-theme($theme);
  @include tl-dropdonwlist-theme($theme);
  @include tl-editor-theme($theme);
  @include tl-form-theme($theme);
  @include tl-input-theme($theme);
  @include tl-listbox-theme($theme);
  @include tl-list-item-theme($theme);
  @include tl-popupmenu-theme($theme);
  @include tl-menu-theme($theme);
  @include tl-advanced-root-menu-theme($theme);
  @include tl-advanced-sub-menu-theme($theme);
  @include tl-simple-sub-menu-theme($theme);
  @include tl-modal-theme($theme);
  @include tl-modal-toolbar-theme($theme);
  @include tl-multiselect-theme($theme);
  @include tl-navigator-theme($theme);
  @include tl-overlaylist-theme($theme);
  @include tl-overlay-panel-theme($theme);
  @include tl-panelgroup-theme($theme);
  @include tl-permissions-theme($theme);
  @include tl-progressbar-theme($theme);
  @include tl-radiobutton-theme($theme);
  @include tl-splitbutton-theme($theme);
  @include tl-stopwatch-theme($theme);
  @include tl-switch-theme($theme);
  @include tl-tabcontrol-theme($theme);
  @include tl-textarea-theme($theme);
  @include tl-timepicker-theme($theme);
  @include tl-time-available-picker-theme($theme);
  @include tl-tag-theme($theme);
  @include tl-toaster-theme($theme);
  @include tl-toolbar-theme($theme);
  @include tl-clockpicker-theme($theme);
  @include tl-timeline-theme($theme);
  @include tl-timeline-item-theme($theme);
}


       ^
      Can't find stylesheet to import.
  ╷
1 │ @import "../../../accordion/accordion-theme";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules\truly-ui\css\theming\_components.scss 1:9            @import
  node_modules\truly-ui\css\theming\builders\basic\_index.scss 1:9  @import
  stdin 3:9                                                         root stylesheet

Saidabbos avatar Mar 01 '19 10:03 Saidabbos

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. To help make it easier for us to investigate your issue, please follow the contributing guidelines.

welcome[bot] avatar Mar 01 '19 10:03 welcome[bot]

Hello @Saidabbos, are you trying to create a custom theme for your application? If so, we are correcting this implementation, but you can use the themes already created by our team.

You can view how to use themes already created in this session: http://truly-ui.com/theming - Using a pre-built theme

abalad avatar Mar 01 '19 18:03 abalad

@abalad thank you for response. As long as I'm using default theme. But I hope you'll fix it soon

Saidabbos avatar Mar 04 '19 13:03 Saidabbos

@abalad I am trying to do the same thing @Saidabbos did - following the instructions to create a custom theme. All I'm concerned about is making a dark mode. I followed the instructions and got the same accordian error as above. I also tried going into the _default-theme.scss within my node_modules/truly-ui folder and make the changes there. But it didnt seem to take effect. I assume my changes arent built into whatever is being required.

Any solution to this? All I want is a dark theme.

nascarjake avatar Apr 20 '20 00:04 nascarjake

@abalad Any news on this? I've seen that you guys are working on making the documentation better - so I know this is all being worked on, not trying to rush that - just wondering if theres something i can do in the interim to get a dark mode working. Thanks for all your hard work.

nascarjake avatar Apr 30 '20 03:04 nascarjake

TWO YEARS HAVE PAST! And anyone fixed this. Truly.ui is a great library, but it's support it's terrible, they never fixed the problems that i had. It's a shame for this good library, but it becomes not usable for simple errors like this.

CarlosBC avatar Aug 16 '21 11:08 CarlosBC