I'm currently working on integrating storybook with stencil, but the stencil project was initially set up with the app starter using npm init stencil. Here's how it looks
I've been researching how to use stencil with storybook, but most resources have initialized their projects with the component starter. In articles like this one , I was advised to add
import {defineCustomElements} from '../loader'; defineCustomElements();preview.js. However, since there is no loader available with the app stencil starter, this method doesn't actually work.
This is what my stencil.config.ts file looks like.
import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';
// https://stenciljs.com/docs/config
const prod: boolean = process.argv && process.argv.indexOf('--prod') > -1;
const apiEnv: string = prod ? 'prod' : 'dev';
export const config: Config = {
env: {
apiEnv: apiEnv
},
globalStyle: 'src/global/app.css',
globalScript: 'src/global/app.ts',
taskQueue: 'async',
outputTargets: [
{
type: 'www',
// comment the following line to disable service workers in production
serviceWorker: null
}
],
plugins: [
sass({
injectGlobalPaths: ['src/global/scss/app.scss']
})
]
};