StencilJS: compile scss and copy to dist folder

Question

My goal is to provide a css file in the distribution package which can be used by the consumer if needed.

For that I would like to create a kind of global scss file, but I want to avoid that this style is attached to each component + it also won't be used directly by the components. So for that I would like to create my-style.scss file somewhere in the /src folder.

What would be the best way to compile this file to my-style.css and copy it to the dist folder?

I don't think this is currently possible, as Stencil embeds styles in each component's JS based on whether it supports shadow DOM. I think you'd need to request external SCSS as a new feature. — matthewsteele, Jul 09 '18 at 22:23
@matthewsteele shouldn't this be somehow possible by running @stencil/sass plugin twice with rollup (in stencil.config.js). Until now I was not able to do the setup properly. — Ratan, Jul 10 '18 at 11:37
I don't think there is a way of doing that within the Stencil world. I'd probably setup a separate build task that compiles the file and poops it out to the dist folder separately from Stencil. e.g. `npm run build && npm run scss` — Greg, Aug 10 '18 at 08:42

score 7 · Answer 1 · answered Aug 29 '18 at 16:31

It is possible to specify a global style with Stencil. Simply add the globalStyle property to your stencil.config.js and provide the entry scss file. Your config should look something like this:

const sass = require('@stencil/sass');

exports.config = {
  namespace: 'my-component-lib',
  outputTargets:[
    {
      type: 'dist'
    },
    {
      type: 'www',
      serviceWorker: false
    }
  ],
  globalStyle: 'src/globals/app.scss',
  plugins: [
    sass()
  ]
};

exports.devServer = {
  root: 'www',
  watchGlob: '**/**'
}

The build will successfully compile the scss to dist/my-component-lib.css.

score 0 · Answer 2 · answered Oct 03 '18 at 14:54

From the docs: https://stenciljs.com/docs/config/#copy

The copy config is an array of objects that defines any files or folders that should be copied over to the build directory. Each object in the array must include a src property which can be either an absolute path, a relative path or a glob pattern. The config can also provide an optional dest property which can be either an absolute path or a path relative to the build directory. Also note that any files within src/assets are automatically copied to www/assets for convenience.

In the copy config below, it will copy the entire directory from src/docs-content over to www/docs-content.

Within stencil.config.ts:

copy: [
  { src: 'docs-content' }
]

For example I am copying my css file from src to the build directory and it's totally standalone, e.g. https://github.com/BlazeUI/blaze/blob/master/packages/atoms/stencil.config.ts#L14

StencilJS: compile scss and copy to dist folder

2 Answers2