Трафарет - Global CSS не интегрируется в ReactCSS

Разбираемся в CSS
Ответить
Anonymous
 Трафарет - Global CSS не интегрируется в React

Сообщение Anonymous »

Следуя трафаретным документам здесь, я создал некоторые глобальные переменные CSS в src/global/variables.css. В настоящее время это единственный файл CSS в этом каталоге. Переменные компоненты / CSS работают совершенно нормально при разработке в проекте трафарета и когда я копирую www / build / каталог в проект ванильного JS / HTML, но не когда я импортирую и использую их в React. Компоненты работают и четко отображаются, но CSS в глобальном /каталоге явно не отображается. Глобальные файлы CSS. >

Я попытался обновить самую последнюю версию трафарета и обновил все остальные пакеты. < /p>

Я также пытался добавить : < /p>

Код: Выделить всё

styleUrls: [
"local-component.css",
"../../global/variables.css"
]
< /code>

Но это также не сработало. SO: < /p>

< /code> < /p>

Но не удастся, если я попытаюсь сделать локальный путь, как это: < /p>

< /code>. < /p>

Это единственный /лучший подход или что -то мне не хватает? < /p>

Это мой stencil.config.ts: < /p>

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' }
]
};
Свойство копирования копирует глобальный Dir to Dust/collection/. Это также не решает проблему.{
"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"
}
< /code>

Весь этот проект трафарета здесь. < /p>

Заранее спасибо. < /p>

Подробнее здесь: https://stackoverflow.com/questions/591 ... into-react
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»