Not able to use SASS variables

Stencil
1

Guys, i’m developing a component library that makes use of a SCSS from a Design System.

In a simples button component I import the scss from the component and on stencil.config.ts I import the SCSS with the global variables. I know that at least it recognizes my files because on my button.scss I have a $prefix that when I dont add the global variables the build fails.

But still, my styles dont get applied. What might I be doing wrong? I tried putting the variables scss on the same file of the component but the result is the same.

As you can see in the image bellow some styles get applied to the default html button but other (that need the variables dont).

image
image1691×342 20.2 KB

Thank you for your help.

br-button.scss

@import "~@govbr-ds/core/src/components/button/_button";

:host {
  display: block;
}

br-button.tsx

import { Component, Host, h } from '@stencil/core';

@Component({
  tag: 'br-button',
  styleUrl: 'br-button.scss',
  shadow: true,
})
export class BrButton {
  render() {
    return (
      <Host>
        <button class="br-button primary mr-3" type="button">
          Primário
        </button>
      </Host>
    );
  }
}

stencil.config.ts

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

export const config: Config = {
  namespace: 'govbr-ds-webcomponents',
  globalStyle: 'node_modules/@govbr-ds/core/dist/core-base.min.css',
  outputTargets: [
    {
      type: 'dist',
      esmLoaderPath: '../loader',
    },
    {
      type: 'dist-custom-elements',
    },
    {
      type: 'docs-readme',
    },
    {
      type: 'www',
      serviceWorker: null, // disable service workers
    },
  ],
  testing: {
    browserHeadless: 'new',
  },
  plugins: [
    sass({
      injectGlobalPaths: [
        'node_modules/@govbr-ds/core/src/partial/scss/_base.scss',
        'node_modules/@govbr-ds/core/src/partial/scss/_tokens.scss',
        'node_modules/@govbr-ds/core/src/partial/scss/_utilities.scss',
      ],
    }),
  ],
  devServer: {
    openBrowser: false,
  },
};
2

Remove this and you will see your styles being applied.

3

Actuallly I cant remove this. But I found that placing a variable.scss in index.html does the trick.

4

We just declare a local driver file and include any variable files or mixins as needed:

// stencil.config.js
import { sass } from '@stencil/sass';
...
plugins: [
    sass({
        injectGlobalPaths: ['./stencil/src/styles/app.scss'],
    }),
],

// stencil/src/styles/app.scss

@import '../sass/variables/_colorpalette';
@import '../sasssass/variables/_icons.scss';
@import './common.scss';
@import '../sass/common/colors';
@import '../sass/variables/_shadows';
@import '../sass/variables/_space';