Stenciljs CSS глобальные переменные

Я не могу заставить работать глобальные переменные CSS, как описано в документации по ионному трафарету.

Я создал файл 'variables.css' в 'src / global /', а затем поместил "globalStyle: 'src / global / variables.css'" в файл "stencil.config.ts".

Затем я создал набор переменных css в variables.css и попытался использовать их в файле css моего компонента; однако используются значения по умолчанию, так как не удается загрузить глобальные переменные.

// 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);
}

Не стесняйтесь взглянуть на тест репо.

Источник

1 ответ

Решение

Я сам реализовал эту функциональность, используя команду config для копирования моего файла global/variables.css из каталога src / в www/ и dist /. Кроме того, для тестирования я добавляю тег ссылки на таблицу стилей для global/variables.css в файле index.html. Нет необходимости устанавливать конфигурацию globalStyle, если вы следуете этому процессу.

Хотя это не учитывает тот факт, что процесс, описанный в документах, кажется неправильным, он обеспечивает желаемый эффект.

// 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>
Источник

Если вы используете SASS, вы можете добавить это в свой файл stencil.config.ts

...   
plugins: [
    sass({
      injectGlobalPaths: ["src/global/variables.scss"]
    })
  ]
...
Источник

Я исправил это, добавив <link rel="stylesheet" href="/build/{YOUR_NAMESPACE}.css"> в src/index.html,

Источник

Эта проблема связана с теневым DOM, при использовании декоратора @component у нас есть свойство shadow, которое делает его ложным. Это должно соблюдаться во вложенных компонентах. См. https://stenciljs.com/docs/styling

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

Ссылка на изображение

Источник
Другие вопросы по тегам