How to Copy Assets From node_modules in Stencil.js
Posted on Dec 13, 2018 (last modified May 31, 2021)
In this post I describe how to copy assets from the node_modules
directory using the copy
config in the stencil.config.ts
file for Stencil.js.
My Stencil project has a dependency on Bootstrap, so in the pages that use my components, I needed to include the following files:
- bootstrap.min.css
- bootstrap.min.js
- jquery.slim.min.js
- popper.min.js
First, I added these as dev dependencies using npm. For one example:
npm install boostrap --save-dev
The next goal was to make sure that these assets were copied to the www/assets
directory during the build process. Copying resources from one location to another can be achieved with the copy
config specified with src
and dest
in the stencil.config.ts
file as shown below.
copy: [
{ src: '../node_modules/bootstrap/dist/css/bootstrap.min.css', dest: 'assets/css/bootstrap.min.css'},
{ src: '../node_modules/bootstrap/dist/js/bootstrap.min.js', dest: 'assets/js/bootstrap.min.js'},
{ src: '../node_modules/jquery/dist/jquery.slim.min.js', dest: 'assets/js/jquery.slim.min.js'},
{ src: '../node_modules/popper.js/dist/popper.min.js', dest: 'assets/js/popper.min.js'}
]
With that configuration, Stencil.js copies the resources to the specified locations within www/assets
whenever the build is executed (such as when running npm start
.
For more information see: Stencil Config – copy