Stencil - Including src/global in dist/ & integrate in React

Stencil
1

Following the Stencil docs here, I created some global CSS variables in src/global/variables.css. This is currently the only CSS file in this directory.

I’m trying to use my component(s) in React. The components / CSS variables work perfectly fine when developing in the Stencil project and when I copy the www/build/ directory to a vanilla JS / HTML project but not when I import and use them in React. The components work and clearly load but the CSS in the global/ directory clearly doesn’t get rendered.

Defining and using CSS variables within the component CSS files works, just not the global CSS files.

I’m guessing something is wrong how I’m building it but I don’t know what I’m doing wrong.

This is my stencil.config.ts:

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

export const config: Config = {
  namespace: 'poc',
  globalStyle: 'src/global/variables.css',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: 'loader'
    },
    {
      type: 'docs-readme'
    },
    {
      type: 'www',
      serviceWorker: null // disable service workers
    }
  ],
  copy: [
    { src: 'global' }
  ]
};

The copy property copies the global dir across to dist/collection/.

This is my package.json:

{
  "name": "uwe-ds-poc",
  "version": "0.0.9",
  "description": "Stencil Component Starter",
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "es2015": "dist/esm/index.mjs",
  "es2017": "dist/esm/index.mjs",
  "types": "dist/types/index.d.ts",
  "collection": "dist/collection/collection-manifest.json",
  "collection:main": "dist/collection/index.js",
  "unpkg": "dist/poc/poc.js",
  "files": [
    "dist/",
    "loader/"
  ],
  "scripts": {
    "build": "stencil build --docs",
    "start": "stencil build --dev --watch --serve",
    "test": "stencil test --spec --e2e",
    "test.watch": "stencil test --spec --e2e --watchAll",
    "generate": "stencil generate"
  },
  "devDependencies": {
    "@stencil/core": "^1.8.1",
    "@types/jest": "^24.0.23",
    "@types/puppeteer": "1.20.2",
    "jest": "^24.9.0",
    "jest-cli": "24.8.0",
    "puppeteer": "1.20.0"
  },
  "license": "MIT"
}

This entire project is here.