Question

在Stencil文档here之后，我在src / global / variables.css中创建了一些全局CSS变量。这是该目录中唯一的CSS文件。

我正在尝试在React中使用我的组件。当在Stencil项目中进行开发时，以及当我将www / build /目录复制到普通JS / HTML项目中时，components / CSS变量都可以很好地工作，但是当我在React中导入和使用它们时却不能。组件可以正常工作并可以呈现，但是global /目录中的CSS显然没有呈现。

可以在组件CSS文件中定义和使用CSS变量，但不能使用全局CSS文件。

我猜测我的构建方式有问题，但我不知道自己在做什么错。

我尝试过更新到最新的Stencil版本，并更新了所有其他软件包。

我也尝试添加：

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

但是这也不起作用。

仅当这样添加引用UNPKG CDN的CSS标签时，该标签才有效：

<link rel="stylesheet" type="text/css" href="https://unpkg.com/uwe-ds-poc@0.0.9/dist/poc/poc.css"/>

但是如果我尝试执行这样的本地路径会失败：

<link rel="stylesheet" type="text/css" href="../node_modules/uwe-ds-poc/dist/poc/poc.css"/>。

这是唯一/最好的方法还是我缺少什么？

这是我的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' }
  ]
};

copy属性将全局目录复制到dist / collection /。这也不能解决问题。

这是我的package.json：

{
  "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"
}

整个Stencil项目为here。

谢谢。

Answer 1

导入unpkg CDN是有效的选择。

但是，如果您使用捆绑器（Webpack，包裹等），则可以仅使用import 'my-package/dist/path/to/global.css'之类的方式导入CSS。

模具-全局CSS不会集成到React中

1 个答案: