Question

我有一个运行了 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"
  }
}

Answer 1

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

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

Answer 2

问题出在 react-scripts-ts 。我不太确定如何将其纳入解决方案。

一个新发现的问题是，当使用常规的 react-scripts 时，将不再允许使用webpack别名。 kes ..

新的 package.json 转储（添加了 esLintConfig 属性，并使用 react-scripts 切换了 react-scripts-ts >）：

{
  "name": "reason-md-webapp",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@veracity/ui-react": "0.2.66396",
    "bootstrap": "3.3.7",
    "react-bootstrap": "0.31.5",
    "react-router-bootstrap": "0.24.4",
    "react": "^16.6.3",
    "react-app-polyfill": "0.1.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1",
    "react-redux": "5.1.1",
    "react-router-dom": "4.2.2",
    "typescript": "3.1.6",
    "node-sass": "4.10.0",
    "redux": "3.7.2",
    "redux-thunk": "2.2.0",
    "react-router-redux": "5.0.0-alpha.8"
  },
  "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"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Create-react-app 2.1.1：Sass并未真正加载

2 个答案: