0

I have a anuglar 8 application.

And I try to use AlertifyJs.

So in the styles.css file of Angular, I import this libraries:

@import '../node_modules/alertifyjs/build/alertify.min.js';
@import '../node_modules/alertifyjs/build/css/themes/bootstrap.min.css';

But after I get this error:

./src/styles.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./src/styles.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError

(2:14) Unknown word

So what I have to change?

Thank you

So the complete styles.css looks like this:

/* You can add global styles to this file, and also import other style files */
@import './assets/main.css';
@import './assets/theme-vital.css';
@import '../node_modules/alertifyjs/build/alertify.min.js';
@import '../node_modules/alertifyjs/build/css/themes/bootstrap.min.css';

And this is the total error:

 1 | /*! alertifyjs - v1.13.1 - Mohammad Younes <[email protected]> (http://alertifyjs.com) */
> 2 | !function(a){"use strict";function b(a,b){a.className+=" "+b}function c(a,b){for(var c=a.className.split(" "),d=b.split(" "),e=0;e<d.length;e+=1){var f=c.indexOf(d[e]);f>-1&&c.splice(f,1)}a.className=c.join(" ")}function d(){return"rtl"===a.getComputedStyle(document.body).direction}function e(){return document.documentElement&&document.documentElement.scrollTop||document.body.scrollTop}function f(){return document.documentElement&&document.documentElement.scrollLeft||document.body.scrollLeft}function g(a){for(;a.lastChild;)a.removeChild(a.lastChild)}function h(a){if(null===a)return a;var b;if(Array.isArray(a)){b=[];for(var c=0;c<a.length;c+=1)b.push(h(a[c]));return b}if(a instanceof Date)return new Date(a.getTime());if(a instanceof RegExp)return b=new RegExp(a.source),b.global=a.global,b.ignoreCase=a.ignoreCase,b.multiline=a.multiline,b.lastIndex=a.lastIndex,b;if("object"==typeof a){b={};for(var d in a)a.hasOwnProperty(d)&&(b[d]=h(a[d]));return b}return a}function i(a,b){if(a.elements){var c=a.elements.root;c.parentNode.removeChild(c),delete a.elements,a.settings=h(a.__settings),a.__init=b,delete a.__internal}}function j(a,b){return function(){if(arguments.length>0){for(var c=[],d=0;d<arguments.length;d+=1)c.push(arguments[d]);return c.push(a),b.apply(a,c)}return b.apply(a,[null,a])}}function k(a,b){return{index:a,button:b,cancel:!1}}function l(a,b){if("function"==typeof b.get(a))return b.get(a).call(b)}function m(){function a(a,b){for(var c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a}function b(a){var b=d[a].dialog;return b&&"function"==typeof b.__init&&b.__init(b),b}function c(b,c,e,f){var g={dialog:null,factory:c};return void 0!==f&&(g.factory=function(){return a(new d[f].factory,new c)}),e||(g.dialog=a(new g.factory,w)),d[b]=g}var d={};return{defaults:p,dialog:function(d,e,f,g){if("function"!=typeof e)return b(d);if(this.hasOwnProperty(d))throw new Error("alertify.dialog: name already exists");var h=c(d,e,f,g);this[d]=f?function(){if(0===arguments.length)return h.dialog;var b=a(new h.factory,w);return b&&"function"==typeof

and this is the theme-vital.css. So all the css of the main theme. This file is also included in the styles.css file:

body {
  color: #69b3d6;
  background: #fff;
}
.bg-lightest {
  background: #b9dcec;
}
.bg-light {
  background: #69b3d6;
}
.bg-dark {
  background: #419fcb;
}
.bg-darkest {
  background: #2f83aa;
}
.bg-neutral {
  background: #f2f2f2;
}
.font-white {
  color: #fff;
}
.font-black {
  color: #000;
}
.font-lightest {
  color: #b9dcec;
}
.font-light {
  color: #69b3d6;
}
.font-dark {
  color: #419fcb;
}
.font-darkest {
  color: #2f83aa;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #419fcb;
}
.button {
  background: #69b3d6;
  color: #fff;
}
.button:hover {
  background: #419fcb;
  color: #fff;
}
.button-danger {
  background-color: #cd2d2f;
}
.button-danger:hover {
  background-color: #a32425 !important;
}
.progress-bar-mark {
  background: #f2f2f2;
  color: #69b3d6;
}
.progress-bar-mark::before,
.progress-bar-mark::after {
  background: #f2f2f2;
}
.progress-bar-mark.active {
  background: #69b3d6;
  color: #fff;
}
.progress-bar-mark.active::before,
.progress-bar-mark.active::after {
  background: #69b3d6;
}
.add-symbol {
  color: #b9dcec;
}
.panel-user {
  background-color: #2f83aa;
}
.nav-tab-bar-tab {
  background: #2f83aa;
  color: #fff;
}
.nav-tab-bar-tab:hover {
  color: #fff;
  background: #69b3d6;
}
.nav-tab-bar-swipehint-right .bg,
.nav-tab-bar-swipehint-left .bg {
  fill: #2f83aa;
  opacity: 0.6;
}
.nav-tab-bar-swipehint-right .line,
.nav-tab-bar-swipehint-left .line {
  fill: #fff;
}
app-measurement-navigation {
  background: #419fcb;
  color: #b9dcec;
}
app-measurement-navigation .back {
  color: #b9dcec;
}
app-measurement-navigation .back:hover {
  color: #419fcb;
}
app-measurement-navigation .icon-bar-entry:hover {
  color: #419fcb;
}
.advice {
  background: #f2f2f2;
}
.measurement-table .measurement-table-header {
  background-color: #2f83aa;
  color: #fff;
}
.measurement-table-body {
  color: #2f83aa;
  border-color: #2f83aa;
}
.dossier-header {
  background-color: #69b3d6;
  color: #fff;
}
app-webshop-item .discount {
  background: #419fcb;
  color: #fff;
}
app-webshop-item .fullprice {
  background: #f2f2f2;
}
app-chat-message {
  background: #fff;
}
app-chat-message.sent {
  border-color: #2f83aa;
}
.dashboard-todo-day-header {
  background: #fff;
}
.chathead {
  border-color: #fff;
}
.panel-generic {
  border-color: #b9dcec;
}
.nav-tab-bar-tab {
  border-bottom-color: #2f83aa;
}
.nav-tab-bar-tab:hover {
  border-bottom-color: #69b3d6 !important;
}
.nav-tab-bar-tab.active {
  border-bottom-color: #69b3d6;
}
.panel-messages {
  border-bottom-color: #b9dcec;
}
.dashboard-todo {
  border-right-color: #b9dcec;
}
app-todo-day:not(:first-child) > .dashboard-header {
  border-top-color: #b9dcec;
}
.dashboard-todo-day {
  border-left-color: #b9dcec;
}
app-measurement-panel:not(:nth-child(3n)) {
  border-right-color: #b9dcec;
}
app-measurement-form {
  border-left-color: #b9dcec;
}
app-advice-item {
  border-color: #b9dcec;
}
app-advice-item .advice-text {
  border-color: #b9dcec;
}
app-todo-item {
  border-color: #b9dcec;
}
app-todo-day:not(:first-child) {
  border-top: 1px solid #b9dcec;
}
.dossier-correspondencerow:hover {
  background-color: rgba(185, 220, 236, 0.5);
  color: #fff;
}
app-webshop-item {
  border-color: #b9dcec;
}
#form-settings-account {
  border-color: #b9dcec;
}
app-chat-message {
  border-color: #b9dcec;
}
.main-row.has-border {
  border-bottom-color: #b9dcec;
}
.training-row-steplist-entry {
  border-color: #b9dcec;
}
app-training-panel {
  border-color: #b9dcec;
}
app-training-hero {
  border-color: #b9dcec;
}
.pdf-page-selected-page {
  color: #69b3d6;
}
.section-header {
  color: #419fcb;
}
.dossier-header {
  border-bottom-color: #419fcb;
}
.modal-overlay {
  background-color: rgba(0, 0, 0, 0.4);
}
.modal-body {
  background-color: #fff;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.17);
}
.modal-title {
  color: #fff;
  background: #419fcb;
}
.modal-close {
  color: #fff;
}
.organisation-isDefault {
  background: #fff;
  color: #69b3d6;
  border-color: #69b3d6;
}
.welcome-advice {
  border-bottom-color: #b9dcec;
}
.onboard-stepcounter-indicator {
  color: #69b3d6;
}
Improve this question
6
  • Could you please share the contents of your ./src/styles.css? Commented Apr 1, 2020 at 7:53
  • So without the imports of the alertify it runs. But if I put the libraries of Alertifyjs in the styles.css then it crash Commented Apr 1, 2020 at 8:02
  • Am I understand correctly, that you tried import scripts in the stylesheets ? :D Commented Apr 1, 2020 at 8:22
  • So is this enough? Or what I have to post more here? Commented Apr 1, 2020 at 8:23
  • @AlexanderFSP. Yes. I have installed the ALertifyjs with npm install. and now I try to import the libraries in the styles.css file Commented Apr 1, 2020 at 8:24

1 Answer 1

Reset to default
1

Good day!

You should import your scripts into angular.json, check my snippet below:

{
  "projects": {
    "your-app": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "./node_modules/any-css-library/any-css-library.css",
              "src/assets/scss/main.css",
              "src/styles.css"
            ],
            "scripts": [
              "./node_modules/any-js-library/dist/any-js-library.min.js"
            ],
          }
        }
      }
    }
  }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.