Stenciljs CSS global variables

Question

I am unable to get global css variables working as described in the ionic stencil docs.

I created a 'variables.css' file in 'src/global/', then put "globalStyle: 'src/global/variables.css'" into the "stencil.config.ts" file.

I then created a set of css variables in the variables.css and attempted to use them in my component's css file; however, the defaults are used since it fails to load the global variables.

// stencil.config.ts
import { Config } from '@stencil/core';

export const config: Config = {
    namespace: 'mycomponent',
    outputTargets:[
        {
            type: 'dist'
        },
        {
            type: 'www',
            serviceWorker: null
        }
    ],
    globalStyle: 'src/global/variables.css'
}


// src/global/variables.css
:root {
    --qa-primary-color: #2169e7;
    --qa-secondary-color: #fcd92b;
    --qa-dark-color: #0000;
    --qa-light-color: #ffff;
    --qa-font-family: Arial, Helvetica, sans-serif;
    --qa-font-size: 12px;
}


// src/components/my-component.css
.main {
    background: var(--qa-dark-color, yellow);
}
.first {
    color: var(--qa-primary-color, pink);
}
.last {
    color: var(--qa-secondary-color, green);
}

Feel free to take a look at the test repo.

Dominic · Answer 1 · 2019-06-07T18:45:01.270

5

I fixed this by adding <link rel="stylesheet" href="/build/{YOUR_NAMESPACE}.css"> to src/index.html.

edited Jun 07 '19 at 18:45

answered Jun 07 '19 at 17:08

Dominic

62,658
20
139
163

This worked for me and it seems to be the right way of doing it since all artifacts for components are in the /build directory – Safa Alai Jul 16 '19 at 02:41
1

this is not working after publishing the package and using in angular.. any suggestion – Vishnu Shenoy Jul 24 '20 at 12:28

score 5 · Answer 2 · answered Feb 04 '20 at 00:09

5

If you're using SASS then you can add this in your stencil.config.ts file

...   
plugins: [
    sass({
      injectGlobalPaths: ["src/global/variables.scss"]
    })
  ]
...

answered Feb 04 '20 at 00:09

Azayda

81
2
3

score 2 · Accepted Answer · answered Aug 15 '18 at 19:33

I implemented the functionality myself using the copy config to copy my global/variables.css from the src/ directory to www/ and dist/. Additionally, for testing I add a stylesheet link tag for global/variables.css in the index.html file. There is no need to set the globalStyle config if you follow this process.

While this doesn't address the fact that the process described in the docs seems to be incorrect, it does provide the desired effect.

// stencil.config.ts
import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'mycomponent',
  outputTargets:[
    {
      type: 'dist'
    },
    {
      type: 'www',
      serviceWorker: null
    }
  ],
  copy: [
    { src: 'global' }
  ]
}

// html.index
<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>
        ...
        <link rel="stylesheet" type="text/css" href="global/variables.css">
    </head>
    <body>
        ...
    </body>
</html>

This actually worked for me. But can't we embed the "global/variables.css" into the build file? — Malindu, Nov 28 '18 at 06:02

score -1 · Answer 4 · answered Aug 04 '20 at 06:42

-1

This issue is due to the shadow DOM while using @component decorator we have a property shadow make it false. This should be followed across nested components. Refer https://stenciljs.com/docs/styling#shadow-dom

@Component({
  tag: 'to-do-card-list',
  styleUrl: 'to-do-card-list.css',
  shadow: false,
})

Refer image

answered Aug 04 '20 at 06:42

Pankaj Purke

1
2

This is not really the case. If it were, my solution would not have worked. Note when this question was asked, and the state of StencilJS at that time (specifically in regards to shadow dom). – Michael Riess Aug 18 '20 at 05:58

Stenciljs CSS global variables

4 Answers4