如何对仪表板使用单独的css和js

Question

我在Angular 11中有一个项目，对于这个项目，我在整个应用程序中使用了一个AdminLTE ( CSS和JS的主题)。

在styles.scss中，我有：

@import '~admin-lte/plugins/fontawesome-free/css/all.css';
@import '~admin-lte/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css';
@import '~admin-lte/plugins/icheck-bootstrap/icheck-bootstrap.min.css';
@import '~admin-lte/plugins/jqvmap/jqvmap.min.css';
@import '~admin-lte/dist/css/adminlte.min.css';
@import '~admin-lte/plugins/overlayScrollbars/css/OverlayScrollbars.min.css';
@import '~admin-lte/plugins/summernote/summernote-bs4.min.css';
@import '~admin-lte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css';

在angular.json的时候，我有：

        "scripts": [
          "node_modules/admin-lte/plugins/jquery/jquery.min.js",
          "node_modules/admin-lte/plugins/jquery-ui/jquery-ui.min.js",
          "node_modules/admin-lte/plugins/bootstrap/js/bootstrap.bundle.min.js",
          "node_modules/admin-lte/plugins/chart.js/Chart.min.js",
          "node_modules/admin-lte/plugins/sparklines/sparkline.js",
          "node_modules/admin-lte/plugins/jqvmap/jquery.vmap.min.js",
          "node_modules/admin-lte/plugins/jqvmap/maps/jquery.vmap.usa.js",
          "node_modules/admin-lte/plugins/jquery-knob/jquery.knob.min.js",
          "node_modules/admin-lte/plugins/summernote/summernote-bs4.min.js",
          "node_modules/admin-lte/plugins/bs-custom-file-input/bs-custom-file-input.min.js"
        ]

但现在我只想对仪表板使用单独的主题：

asset/main.css
asset/main.js

我该如何实现这一点？

谢谢

Answer 1

对于js文件，您需要将其添加到angular.json中的脚本数组中，然后添加到typings.d.ts中(如果该文件不存在，则在src中创建该文件)

declare var variableName:any;

将其导入到您的文件中

import * as variable from 'variableName';

对于angular.json中的css，请添加：

"styles": [
  "asset/main.css"
],

然后您可以将其导入仪表板scss文件中

@import 'main.scss';