带有bundle文本css导入的parceljs不起作用

Question

我正在使用Parcel为我的React Typescript应用程序和Shadow创建捆绑包。以下是我的配置，

///index.tsx file
import customCSS from "bundle-text:./assets/antd.scss"
const appContainer = document
.getElementById(config.containerId)
?.attachShadow({ mode: "open" }) as ShadowRoot
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
appContainer
)
let style = document.createElement("style")
style.textContent = customCSS
appContainer.appendChild(style)

下面是app.tsx文件

import React, { Suspense } from "react"
import { BrowserRouter, Route, Routes } from "react-router-dom"
import "./app.scss"
import NotFound from "./pages/404"
import HomePage from "./pages/Home"
import Layout from "./pages/Layout"
const Application: React.FC<any> = () => {
return (
<Suspense fallback={<div>Loading...</div>}>
<BrowserRouter basename="/">
<Routes>
<Route path="*" element={<NotFound />} />
<Route element={<Layout />}>
<Route index element={<HomePage />} />
</Route>
</Routes>
</BrowserRouter>
</Suspense>
)
}

下面是assets/antd.scss文件

@import "npm:antd/dist/antd.min.css";

我添加了declaration.d.ts文件来声明bundle-text:。

declare module "bundle-text:*" {
const value: string
export default value
}

ISSUE:现在的问题是bundle-text运行良好，但正常的css导入不起作用。如果我对bundle-text进行注释，那么常规的CSS导入可以正常工作。

预期：bundle-text和常规CSS导入都应该正常工作。

下面是我的包.json依赖项，

"dependencies": {
"antd": "^4.18.8",
"history": "^5.2.0",
"i18next": "^21.6.11",
"parcel": "2.3.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^11.15.4",
"react-router-dom": "^6.2.1",
"typescript": "4.5.5"
},
"devDependencies": {
"@csstools/normalize.css": "^12.0.0",
"@parcel/transformer-inline-string": "2.3.2",
"@parcel/transformer-sass": "^2.3.2",
"@trivago/prettier-plugin-sort-imports": "^3.2.0",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",
"@typescript-eslint/eslint-plugin": "^5.12.0",
"@typescript-eslint/parser": "^5.12.0",
"autoprefixer": "^10.4.2",
"eslint": "^8.9.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"jest": "^27.5.1",
"node-sass": "^7.0.1",
"parcel": "^2.3.2",
"postcss": "^8.4.6",
"postcss-modules": "^4.3.0",
"prettier": "^2.5.1",
"process": "^0.11.10",
"sass": "^1.49.8",
"typescript": "^4.5.5"
},

这是我在这里遗漏的东西吗？

更新：我已更新并将代码添加到沙箱环境中-包裹阴影DOM反应应用

Answer 1

不幸的是，我认为这是package中的一个错误-我在这里创建了一个简化的复制，并提交了这个github问题。

作为一种可以在我们解决此问题之前使用的变通方法，我发现如果您通过bundle-text管道执行所有css导入，包裹将保持原样。也就是说，你想在你的应用程序中找到你用这个进行全局css导入(例如import "./styles.css"(的地方：

import stylesString from "bundle-text:./styles.css"
let styleElement = document.createElement("style");
styleElement.textContent = stylesString ;
shadowRoot.appendChild(styleElement);

Answer 2

您需要使用sass-to-string包来在css中转换scs-first