javascript - 模块构建失败(来自./node_modules/postcss-loader/src/index.js): SyntaxError (2:14) Unknown word

Question

我有一个 anuglar 8 应用程序。

我尝试使用 AlertifyJs。

因此，在 Angular 的 styles.css 文件中，我导入了以下库:

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

但是在我收到此错误后:

./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

那么我必须改变什么？

谢谢

所以完整的 styles.css 看起来像这样:

/* 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';

这是总错误:

 1 | /*! alertifyjs - v1.13.1 - Mohammad Younes <Mohammad@alertifyjs.com> (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 

这是主题-vital.css。所以主主题的所有css。该文件也包含在 styles.css 文件中:

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;
}

Answer 1

美好的一天!

您应该将脚本导入到 angular.json 中，检查下面的代码片段:

{
  "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"
            ],
          }
        }
      }
    }
  }
}