Skip to content

How to Add External JavaScript and CSS to Dashboard

When the project is built using the following command:

npm run build

The build process generates a dist folder, which contains an index.html file. To integrate external CSS and JavaScript files into the project, these files must be added to the dist folder and properly linked through the index.html file.

Example: CSS File (mycss.css)

.form-buttons.v-btn.v-btn--has-bg.theme--light.v-size--default.primary {
  background-color: magenta !important;
  color: yellowgreen !important;
}

.filter-row {
  display: none !important;
}

.count-info {
  display: none !important;
}

````

**Example**: JavaScript File (`myjs.js`)

```js
// Create a MutationObserver instance
const observer = new MutationObserver(function (mutationsList, observer) {
  for (let mutation of mutationsList) {
    if (mutation.type === "childList") {
      for (let addedNode of mutation.addedNodes) {
        if (addedNode.classList && addedNode.classList.contains("content-add-edit-panel")) {
          document.getElementsByClassName("left-content").item(0).style.display = "none";
        }
      }
      for (let removedNodes of mutation.removedNodes) {
        if (removedNodes.classList && removedNodes.classList.contains("content-add-edit-panel")) {
          document.getElementsByClassName("left-content").item(0).style.display = "block";
        }
      }
    }
  }
});

// Specify the target node and options for the observer
const targetNode = document.getElementsByTagName("body")[0];
const config = { childList: true, subtree: true };

// Start observing the target node
observer.observe(targetNode, config);

Adding External Files to index.html

To include the external CSS and JS files, add the following lines to the index.html file located in the dist folder:

//…
// other js scripts
<script defer="defer" src="/myjs.js"></script>
//…
// other css files
<link href="/mycss.css" rel="stylesheet" />

Deployment

Once the new dist folder is deployed and served via the web application, the external CSS and JavaScript files will be loaded and executed as expected, ensuring the desired styles and functionality are applied.

Last update: September 12, 2024
Back to top