【问题标题】:Create-react-app 2.1.1: Sass doesn't really loadCreate-react-app 2.1.1:Sass 并没有真正加载
【发布时间】:2019-04-19 10:31:49
【问题描述】:

我有一个运行 react-scripts-ts (3.1.0) 和 node-sass (4.10.0) 的小型应用程序。

当我导入时说 "./App.scss" 没有显示导入错误 - 但没有添加任何样式。作为模块导入或定期导入都不起作用。

  • 如果我尝试导入不起作用的文件create-react-app 会引发错误。
  • 如果我尝试导入常规 css 文件,则会定期应用样式。

有什么想法吗? :\


Package.json 转储:

{
  "name": "reason-md-webapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@veracity/ui-react": "0.2.66396",
    "bootstrap": "3.3.7",
    "node-sass": "4.10.0",
    "react": "16.6.3",
    "react-bootstrap": "0.31.5",
    "react-dom": "16.6.3",
    "react-redux": "5.1.1",
    "react-router-bootstrap": "0.24.4",
    "react-router-dom": "4.2.2",
    "react-router-redux": "5.0.0-alpha.8",
    "react-scripts-ts": "3.1.0",
    "redux": "3.7.2",
    "redux-thunk": "2.2.0",
    "rimraf": "2.6.2"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/enzyme": "3.1.6",
    "@types/enzyme-adapter-react-16": "1.0.1",
    "@types/jest": "23.3.9",
    "@types/node": "10.12.6",
    "@types/react": "16.7.6",
    "@types/react-dom": "16.0.9",
    "@types/react-redux": "6.0.9",
    "@types/react-router-dom": "4.3.1",
    "@types/redux-logger": "3.0.5",
    "enzyme": "3.2.0",
    "enzyme-adapter-react-16": "1.1.0",
    "enzyme-to-json": "3.3.0",
    "prettier": "1.15.2",
    "react-router-test-context": "0.1.0",
    "redux-logger": "3.0.6",
    "tslint-config-prettier": "1.16.0",
    "typescript": "3.1.6"
  }
}

【问题讨论】:

  • 遇到与react-scripts-ts 相同的问题,有什么新的原因吗?它也不会抛出错误,但似乎没有导入或编译scss文件,但css工作......
  • 是的。 react-scripts-ts 包是这个问题的罪魁祸首。我最终使用了常规的 react-scripts 包,因为它现在包含打字稿支持 - 然后问题就消失了。
  • 这里也一样,谢谢

标签: typescript sass create-react-app


【解决方案1】:

最好的解决方案是遵循官方文档中的这些说明。尝试逐步重现此过程: CRA DOCS

首先安装 node-sass 并确保它保存在您的项目依赖项中,然后将 App.css 重命名为 App.scss 并将其包含到您的 index.js 入口点 JavaScript 文件中。有时您需要使用 index.css 文件 - 删除它并确保从其他 .js 文件中删除对该文件的所有导入。

【讨论】:

  • 不走运。我试图删除我的锁定文件,删除 node_modules 文件夹。删除 node_sass 并重新添加它。以管理员权限运行。不带跑。这与我选择执行的操作完全相同:import "./randomstaticfile.weirdextension"; 只要文件存在,什么都不会发生。
【解决方案2】:

问题在于 react-scripts-ts。我最终使用了常规的 react-scripts 包,因为它现在包含 typescript 支持 - 然后问题就消失了。

【讨论】:

    猜你喜欢
    • 2017-04-23
    • 2019-04-07
    • 1970-01-01
    • 2021-10-28
    • 2019-01-16
    • 2020-09-20
    • 2018-02-11
    • 2018-09-16
    • 2019-10-14
    相关资源
    最近更新 更多