我用包裹捆绑器构建了一个反应小部件。网站和它的 JavaScript 功能可以工作,但 CSS 没有加载,所以它看起来很丑。我尝试了几种方法,但 CSS 不起作用。
*这是我的包 Json
{
"name": "9jakids-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"@craco/craco": "^6.4.0",
"@testing-library/jest-dom": "^5.12.0",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"node-sass": "^6.0.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-modal": "^3.14.3",
"react-redux": "^7.2.5",
"react-responsive-modal": "^6.1.0",
"react-scripts": "4.0.3",
"redux": "^4.1.1",
"web-vitals": "^1.1.2"
},
"scripts": {
"eject": "react-scripts eject",
"start": "craco start",
"build": "craco build",
"test": "craco test",
"build:widget": "parcel build src/index.js --no-source-maps -d widget"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"parcel-bundler": "^1.12.5"
}
}
我也有一个 craco.config.js 文件,但它是空的。
这是可嵌入的链接。
<div id="lukman-test"></div>
<link href="https://test-royal.000webhostapp.com/widget/index.css" rel="stylesheet" />
<script src="https://test-royal.000webhostapp.com/widget/index.js"></script>