Plugins

Stencil plugins

By default, Stencil does not come with Sass or PostCSS support. However, either can be added using the plugins array.

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';

export const config: Config = {
  plugins: [
    sass()
  ]
};

Rollup plugins

The rollupPlugins config can be used to add your own Rollup plugins. Under the hood, stencil ships with some built-in plugins including node-resolve and commonjs, since the execution order of rollup plugins is important, stencil provides an API to inject custom plugin before node-resolve and after commonjs transform:

export const config = {
  rollupPlugins: {
    before: [
      // Plugins injected before rollupNodeResolve()
      resolvePlugin()
    ],
    after: [
      // Plugins injected after commonjs()
      nodePolyfills()
    ]
  }
}

Related Plugins

• @stencil/sass
• @stencil-community/postcss
• @stencil-community/less
• (Deprecated) @stencil/stylus

Node Polyfills

See the Node Polyfills in Module bundling for other examples.