Create-react-app 2.1.1:Sass 没有真正加载
Create-react-app 2.1.1: Sass doesn't really load
我有一个小应用程序 运行 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"
}
}
最好的解决方案是遵循官方文档中的这些说明。尝试逐步重现此操作:
CRA DOCS
首先安装 node-sass 并确保将其保存在您的项目依赖项中,然后将 App.css 重命名为 App.scss 并将其包含到您的 index.js 入口点 JavaScript 文件。有时您需要使用 index.css 文件 - 将其删除并确保从其他 .js 文件中删除对该文件的所有导入。
问题出在 react-scripts-ts 上。我最终使用了常规的 react-scripts 包,因为它现在包含打字稿支持 - 然后问题就消失了。
我有一个小应用程序 运行 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"
}
}
最好的解决方案是遵循官方文档中的这些说明。尝试逐步重现此操作: CRA DOCS
首先安装 node-sass 并确保将其保存在您的项目依赖项中,然后将 App.css 重命名为 App.scss 并将其包含到您的 index.js 入口点 JavaScript 文件。有时您需要使用 index.css 文件 - 将其删除并确保从其他 .js 文件中删除对该文件的所有导入。
问题出在 react-scripts-ts 上。我最终使用了常规的 react-scripts 包,因为它现在包含打字稿支持 - 然后问题就消失了。