npm install --save-dev @sparkdesignsystem/spark
sparkPolyfills - This file loads a few polyfills that Spark requires. If your application is already polyfilling the items below, you don't need to load this file.
classListon SVG Elements
The Spark assets will now be included when you compile your site. Run the following command:
npm run build
You can verify that this is the case by checking the compiled
index.html, find the
bodyelement and add the
data-sprk-mainattribute. This attribute is required for some Spark components to correctly handle focus changes.
You’re ready to start adding components to your site.
Here are some issues that you might encounter while setting up Spark and how to fix them:
Uncaught ReferenceError: SPRK_CURRENT_VERSION is not defined
Make sure you're importing Spark from the correct directory:
import spark from "@sparkdesignsystem/spark/es5/spark";
This is not the correct directory:
import spark from "@sparkdesignsystem/spark/spark";
Issue: Spark.js is being called, but none of my components are being initialized.
Make sure you're calling
spark() after the DOM is loaded. You may need
to move the
<script> tag in
index.html to the bottom of the file.
Issue: The Webpack build is completing without errors but Spark JS and CSS are not being applied to my site.
index.html. In our example, we needed to change the import from