paullam328
commented
3 years ago I have no luck with my research, but luck with my trial and errors and expertise :0) Apparently, Amplify CI/CD deployment does not support sass imports.
So, I uninstalled node-sass library since it's deprecated, and installed it with sass library
{
"name": "nomadapplication",
"version": "0.1.0",
"private": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.35",
"@fortawesome/free-regular-svg-icons": "^5.15.3",
"@fortawesome/free-solid-svg-icons": "^5.15.3",
"@fortawesome/react-fontawesome": "^0.1.14",
"@material-ui/core": "^4.11.4",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"@types/jest": "^26.0.23",
"@types/node": "^15.3.1",
"@types/react": "^17.0.6",
"@types/react-dom": "^17.0.5",
"aws-amplify": "^4.0.2",
"aws-amplify-react": "^5.0.0",
"aws-appsync": "^4.0.3",
"aws-sdk": "^2.926.0",
"bootstrap": "^4.6.0",
"immutability-helper": "^3.1.1",
"js-sha256": "^0.9.0",
"object-mapper": "^6.2.0",
"react": "^17.0.2",
"react-bootstrap": "^1.6.0",
"react-bootstrap-validation": "^0.1.11",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.2",
"react-feather": "^2.0.9",
"react-redux": "^7.2.4",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-sortable-hoc": "^2.0.0",
"redux": "^4.1.0",
"redux-devtools-extension": "^2.13.9",
"redux-saga": "^1.1.3",
"simple-react-validator": "^1.6.0",
"typescript": "^4.2.4",
"uuid": "^8.3.2",
"web-vitals": "^1.0.1"
},
"scripts": {
"sass": "sass src/styles/sass:src/styles/css --watch --no-source-map",
"start": "concurrently --kill-others \"npm run sass\" \"react-scripts start\"",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@types/image-to-base64": "^2.1.0",
"@types/object-mapper": "^6.2.0",
"@types/react-router-dom": "^5.1.7",
"@types/uuid": "^8.3.0",
"concurrently": "^6.2.0",
"sass": "^1.35.0"
}
}Transpiled all the scss files to css by running npm run sass, import the transpiled .css files instead of .scss, and now it works!
github-actions[bot]
Before opening, please confirm:
JavaScript Framework
React
Amplify APIs
Authentication, GraphQL API, Storage
Amplify Categories
Not applicable
Environment information
Describe the bug
When I deploy Frontend environment on an Amplify app, it complains about:
Cannot find file './styles/Login.scss' in './src'.It works on npm start locally so it's supposed to work? I have node-sass v5.0.0 installed...
Logs as below:
Log output
aws-exports.js
No response
package.json
tsconfig.json
Mobile Device
No response
Mobile Operating System
No response
Mobile Browser
No response
Mobile Browser Version
No response
Additional information and screenshots
So there's build error in yarn run build in Amplify? I ran yarn run build locally
????? It works locally ?????
.gitignore: