首页 > 解决方案 > 创建不再注入 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 更改,但它们没有生效。

标签: reactjscreate-react-app

解决方案


所以这个问题似乎与我在加载应用程序之前在文档头部(用于网站图标)中注入一些代码有关,在包含网站图标 url 的服务器上获取之后。删除它修复了 HMR。谢谢你的帮助


推荐阅读