reactjs - 创建不再注入 CSS (SCSS) 的 React App
问题描述
几天以来我遇到了一个问题,CRA 不再注入 SCSS 更改。
如果我手动刷新页面,SCSS 代码更改就在那里并应用于我的页面。如果我更改我的 JavaScript,则会检测到更改并热重新加载应用程序。
我用的是 3.0 版本的 react-scripts,现在我升级到了最新的 3.2.0。尽管如此,SCSS 没有被注入。
如果它有用,这里是我的 package.json 文件中的包:
"dependencies": {
"@aspnet/signalr": "^1.1.4",
"@reach/router": "^1.2.1",
"axios": "^0.18.0",
"bcryptjs": "^2.4.3",
"css-vars-ponyfill": "^2.1.1",
"dayjs": "^1.8.14",
"dompurify": "^1.0.10",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.4",
"google-maps-react": "^2.0.2",
"html-to-draftjs": "^1.4.0",
"i18next": "^15.1.0",
"i18next-browser-languagedetector": "^3.0.1",
"i18next-xhr-backend": "^2.0.1",
"interweave": "^11.1.0",
"node-sass": "^4.13.0",
"prop-types": "^15.7.2",
"pubnub": "^4.25.2",
"react": "^16.8.6",
"react-anchor-link-smooth-scroll": "^1.0.12",
"react-app-polyfill": "^1.0.1",
"react-dom": "^16.8.6",
"react-draft-wysiwyg": "^1.13.2",
"react-dropzone": "^10.1.5",
"react-ga": "^2.5.7",
"react-google-maps": "^9.4.5",
"react-i18next": "^10.9.0",
"react-image-crop": "^8.2.0",
"react-modal": "^3.8.1",
"react-redux": "^7.0.3",
"react-scripts": "3.2.0",
"react-scroll-up": "^1.3.3",
"react-tooltip": "^3.10.0",
"react-twitter-embed": "^2.0.8",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"uniqid": "^5.0.3"
},
}
有谁知道可能是什么原因造成的,或者我可以尝试什么来解决问题?
编辑:我注意到当我保存一个 scss 文件时,一个 hot-update.js 文件被添加到 DOM 中。此文件包含我的 css 更改,但它们没有生效。
解决方案
所以这个问题似乎与我在加载应用程序之前在文档头部(用于网站图标)中注入一些代码有关,在包含网站图标 url 的服务器上获取之后。删除它修复了 HMR。谢谢你的帮助
推荐阅读
- c# - 获取 InvalidOperationException:不正确的 Content-Type:通过 Web API Core 处理文件时出现文本/纯文本异常
- python - 如何为黄砖残差图设置颜色
- outlook-redemption - 提取oleTyp附件
- sql - 在 Oracle 中比较时间戳和日期的问题
- python - SQLAlchemy 关系之间的差异
- spring - 在 WebSecurityConfigurerAdapter 中为 Spring Security 5 设置 DefaultAuthenticationEventPublisher
- python - 如何将 Visual Studio 代码中的输出从终端更改为输出?我试过了,但找不到命令
- json - 使用 Spray JSON 将 Spark DataFrame 解析为 JSON 对象/数组的通用方法
- angular - 函数在分配给它的值之前返回。如何避免这种情况?
- mysql - 第 1520 行的错误 1273 (HY000):未知排序规则:'utf8mb4_0900_ai_ci'