Heroku Deployment SassError: File to import not found or unreadable. Works fine locally

Question

第一次尝试部署到 heroku，我遇到了这个 sass导致构建失败并被拒绝的错误。

解决步骤

删除节点sass和节点模块/重新安装/推送到主仓库
调整导入路径为@import './scss/_variables.scss';
删除第一个导入以检查该文件是否是问题所在
更新节点以支持节点-sass兼容性

问题

Create React App 在内部构建了 webpack，我是否需要为 sass-loaders、css-loaders、style-loaders 添加我自己的 webpack 配置？

我以前只在 rails 上使用过 webpack，如果我确实需要 webpack，对于我的输出参数，应该用什么来替换我从 rails 得到的“bundle.js” ？

终端响应

remote: 
remote: -----> Building on the Heroku-20 stack
remote: -----> Using buildpack: heroku/nodejs
remote: -----> Node.js app detected
remote:        
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote:        
remote: -----> Installing binaries
remote:        engines.node (package.json):  10.x
remote:        engines.npm (package.json):   unspecified (use default)
remote:        
remote:        Resolving node version 10.x...
remote:        Downloading and installing node 10.24.1...
remote:        Using default npm version: 6.14.12
remote:        
remote: -----> Installing dependencies
remote:        Installing node modules
remote:        
remote:        > nodemon@2.0.4 postinstall /tmp/build_f7e8f26d/node_modules/nodemon
remote:        > node bin/postinstall || exit 0
remote:        
remote:        Love nodemon? You can now support the project via the open collective:
remote:         > https://opencollective.com/nodemon/donate
remote:        
remote:        added 358 packages in 10.306s
remote:        
remote: -----> Build
remote:        Running heroku-postbuild
remote:        
remote:        > server@1.0.0 heroku-postbuild /tmp/build_f7e8f26d
remote:        > NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client
remote:        
remote:        
remote:        > node-sass@6.0.0 install /tmp/build_f7e8f26d/client/node_modules/node-sass
remote:        > node scripts/install.js
remote:        
remote:        Downloading binary from https://github.com/sass/node-sass/releases/download/v6.0.0/linux-x64-64_binding.node
remote:        Download complete
remote:        Binary saved to /tmp/build_f7e8f26d/client/node_modules/node-sass/vendor/linux-x64-64/binding.node
remote:        Caching binary to /tmp/npmcache.gWg6N/node-sass/6.0.0/linux-x64-64_binding.node
remote:        
remote:        > core-js@2.6.12 postinstall /tmp/build_f7e8f26d/client/node_modules/babel-runtime/node_modules/core-js
remote:        > node -e "try{require('./postinstall')}catch(e){}"
remote:        
remote:        
remote:        > core-js@3.12.1 postinstall /tmp/build_f7e8f26d/client/node_modules/core-js
remote:        > node -e "try{require('./postinstall')}catch(e){}"
remote:        
remote:        
remote:        > core-js-pure@3.12.1 postinstall /tmp/build_f7e8f26d/client/node_modules/core-js-pure
remote:        > node -e "try{require('./postinstall')}catch(e){}"
remote:        
remote:        
remote:        > ejs@2.7.4 postinstall /tmp/build_f7e8f26d/client/node_modules/ejs
remote:        > node ./postinstall.js
remote:        
remote:        
remote:        > node-sass@6.0.0 postinstall /tmp/build_f7e8f26d/client/node_modules/node-sass
remote:        > node scripts/build.js
remote:        
remote:        Binary found at /tmp/build_f7e8f26d/client/node_modules/node-sass/vendor/linux-x64-64/binding.node
remote:        Testing binary
remote:        Binary is fine
remote:        added 2124 packages from 812 contributors and audited 2131 packages in 43.95s
remote:        
remote:        139 packages are looking for funding
remote:          run `npm fund` for details
remote:        
remote:        found 81 vulnerabilities (80 moderate, 1 high)
remote:          run `npm audit fix` to fix them, or `npm audit` for details
remote:        
remote:        > client@0.1.0 build /tmp/build_f7e8f26d/client
remote:        > react-scripts build
remote:        
remote:        Creating an optimized production build...
remote:        Failed to compile.
remote:        
remote:        ./src/App.scss
remote:        SassError: File to import not found or unreadable: ./scss/_variables.scss.
remote:                on line 2 of src/App.scss
remote:        >> @import './scss/_variables.scss';
remote:        
remote:           ^
remote:        
remote:        
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! client@0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR! 
remote: npm ERR! Failed at the client@0.1.0 build script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote: 
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.gWg6N/_logs/2021-05-25T08_12_53_624Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! server@1.0.0 heroku-postbuild: `NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client`
remote: npm ERR! Exit status 1
remote: npm ERR! 
remote: npm ERR! Failed at the server@1.0.0 heroku-postbuild script.
remote: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote: 
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /tmp/npmcache.gWg6N/_logs/2021-05-25T08_12_53_642Z-debug.log
remote: 
remote: -----> Build failed
remote:        
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:        
remote:        If you're stuck, please submit a ticket so we can help:
remote:        https://help.heroku.com/
remote:        
remote:        Love,
remote:        Heroku
remote:        
remote:  !     Push rejected, failed to compile Node.js app.
remote: 
remote:  !     Push failed

App.scss

// Abstracts
@import 'scss/variables';
@import 'scss/mixins';

// Base
@import 'scss/globals';

// Components
@import 'scss/header';
@import 'scss/showcase';
@import 'scss/hero';
@import 'scss/feature';
@import 'scss/postLanding';
@import 'scss/footer';
@import 'scss/auth';
@import 'scss/postList';
...etc

客户端包json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.21.1",
    "cra-template": "1.0.3",
    "moment": "^2.29.1",
    "node-sass": "^6.0.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^6.1.0",
    "react-moment": "^1.0.0",
    "react-redux": "^7.2.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-thunk": "^2.3.0",
    "uuid": "^8.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "proxy": "http://127.0.0.1:5000",
  "secure": false,
  "devDependencies": {}
}

服务器包json

{
  "name": "server",
  "version": "1.0.0",
  "description": "jounii",
  "main": "server.js",
  "scripts": {
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\" ",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },
  "author": "Andrew Huang",
  "license": "MIT",
  "dependencies": {
    "aws-sdk": "^2.771.0",
    "axios": "^0.21.1",
    "bcryptjs": "^2.4.3",
    "colors": "^1.4.0",
    "concurrently": "^5.3.0",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "express-async-handler": "^1.1.4",
    "faker": "^5.1.0",
    "jsonwebtoken": "^8.5.1",
    "lodash": "^4.17.21",
    "mongoose": "^5.12.3",
    "morgan": "^1.10.0",
    "multer": "^1.4.2",
    "multer-s3": "^2.9.0",
    "node-geocoder": "^3.27.0",
    "nodemailer": "^6.6.0",
    "request": "^2.88.2"
  },
  "devDependencies": {
    "nodemon": "^2.0.4"
  },
  "engines": {
    "node": "10.x"
  }
}

文件树 enter image description here

Answer 1

试试这个：

https://create-react-app.dev/docs/adding-a-sass-stylesheet

如果您设置 SASS_PATH=node_modules:src，这将允许您像

这样进行导入

@import 'styles/colors'; // assuming a styles directory under src/, where _colors.scss partial file exists.
@import 'nprogress/nprogress'; // importing a css file from the nprogress node module

Heroku Deployment SassError: File to import not found or unreadable. Works fine locally

Heroku Deployment SassError: File to import not found or unreadable. Works fine locally

sass

heroku

node.js

reactjs