As per the guidance provided in the Stencil docshere, I have established some global CSS variables within src/global/variables.css. This file is currently the sole CSS resource in this particular directory.
Upon attempting to incorporate my components into a React environment, everything functions as expected when working within the Stencil project or when transferring the www/build/ directory contents to a plain JS/HTML project. However, the problem arises when trying to import and utilize them in React. Although the components visibly render, the CSS styles from the global/ directory fail to apply.
While defining and utilizing CSS variables directly within component-specific CSS files proves effective, the same cannot be said for global CSS files.
I suspect there may be an issue with my build process, but I am uncertain of where I might be going wrong.
I've experimented with updating to the latest version of Stencil and ensuring all other packages are up-to-date.
In addition, I attempted to address the issue by including:
styleUrls: [
"local-component.css",
"../../global/variables.css"
]
Regrettably, this approach did not yield positive results.
The only workaround that seems to work is adding a CSS link tag pointing to the UNPKG CDN like so:
<link rel="stylesheet" type="text/css" href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="621715074f06114f120d0122524c524c5b">[email protected]</a>/dist/poc/poc.css"/>However, attempts to use a local path such as the following prove unsuccessful:
<link rel="stylesheet" type="text/css" href="../node_modules/uwe-ds-poc/dist/poc/poc.css"/>Is resorting to this method the only viable option, or is there something crucial I'm overlooking?
Here's an excerpt from 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 facilitates the transfer of the global directory contents to dist/collection/. Despite this, the issue remains unresolved.
This is what my package.json looks like:
{
"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"
}
The complete Stencil project can be accessed here.
Your assistance is greatly appreciated.