带有 Node-SASS 和 CSS 模块的 Create-React-App v2 在本地工作，但在 Heroku 中崩溃

Question

我正在使用 Create-React-App v2 并已安装 node-sass。我也希望使用 CSS 模块，所以我将扩展和导入更改为 .module.scss。

注意：我已经将变量（_color.scss、_type.scss）导入到每个组件的样式表中，但它不起作用，所以我现在手动将每个需要的变量导入到每个组件的样式表中。

所以现在该应用程序在本地运行，但在 Heroku 中崩溃。 Heroku logs 状态 build failed 并提供 3 个构建输出链接以帮助进行故障排除。以下是以下构建输出。

第一次构建输出

-----> Node.js app detected

-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       NODE_VERBOSE=false

-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)

       Resolving node version 10.x...
       Downloading and installing node 10.15.3...
       Using default npm version: 6.4.1

-----> Restoring cache
       - node_modules

-----> Installing dependencies
       Installing node modules (package.json + package-lock)
       audited 36784 packages in 17.665s
       found 63 low severity vulnerabilities
         run `npm audit fix` to fix them, or `npm audit` for details

-----> Build
       Running build

       > webportfolio@0.1.0 build /tmp/build_946ff21a3c8a665eda74215ba467f646
       > react-scripts build

       Creating an optimized production build...
       Failed to compile.

       ./src/App.js
       Cannot find file './Components/Portfolio/Portfolio' in './src'.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webportfolio@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the webportfolio@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.EQOTa/_logs/2019-03-11T23_54_27_075Z-debug.log
-----> Change to Node.js build process 
       Heroku has begun executing the "build" script defined in package.json
       during Node.js builds.
       Read more: https://devcenter.heroku.com/changelog-items/1573
-----> Build failed

       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys

       Some possible problems:

       - Node version not specified in package.json
         https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version

       Love,
       Heroku

 !     Push rejected, failed to compile Node.js app.
 !     Push failed

第二次构建输出

-----> Node.js app detected

-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       NODE_VERBOSE=false

-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)

       Resolving node version 10.x...
       Downloading and installing node 10.15.3...
       Using default npm version: 6.4.1

-----> Restoring cache
       - node_modules

-----> Installing dependencies
       Installing node modules (package.json + package-lock)
       audited 36784 packages in 17.814s
       found 63 low severity vulnerabilities
         run `npm audit fix` to fix them, or `npm audit` for details

-----> Build
       Running build

       > webportfolio@0.1.0 build /tmp/build_85b1987ab543478c5aee6f4728e8b330
       > react-scripts build

       Creating an optimized production build...
       Failed to compile.

       ./src/App.js
       Cannot find file './Components/Portfolio/Portfolio' in './src'.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webportfolio@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the webportfolio@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.htJgH/_logs/2019-03-12T00_00_58_185Z-debug.log
-----> Change to Node.js build process 
       Heroku has begun executing the "build" script defined in package.json
       during Node.js builds.
       Read more: https://devcenter.heroku.com/changelog-items/1573
-----> Build failed

       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys

       Some possible problems:

       - Node version not specified in package.json
         https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version

       Love,
       Heroku

 !     Push rejected, failed to compile Node.js app.
 !     Push failed

第三次构建输出

-----> Node.js app detected

-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       NODE_VERBOSE=false

-----> Installing binaries
       engines.node (package.json):  10.5.0
       engines.npm (package.json):   unspecified (use default)

       Resolving node version 10.5.0...
       Downloading and installing node 10.5.0...
       Using default npm version: 6.1.0

-----> Restoring cache
       Cached directories were not restored due to a change in version of node, npm, yarn or stack
       Module installation may take longer for this build

-----> Installing dependencies
       Installing node modules (package.json + package-lock)

       > node-sass@4.11.0 install /tmp/build_17cf925c197f17907d43d6369284d804/node_modules/node-sass
       > node scripts/install.js

       Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/linux-x64-64_binding.node
       Download complete
       Binary saved to /tmp/build_17cf925c197f17907d43d6369284d804/node_modules/node-sass/vendor/linux-x64-64/binding.node
       Caching binary to /tmp/npmcache.Dfkzs/node-sass/4.11.0/linux-x64-64_binding.node

       > node-sass@4.11.0 postinstall /tmp/build_17cf925c197f17907d43d6369284d804/node_modules/node-sass
       > node scripts/build.js

       Binary found at /tmp/build_17cf925c197f17907d43d6369284d804/node_modules/node-sass/vendor/linux-x64-64/binding.node
       Testing binary
       Binary is fine
       added 1883 packages from 750 contributors and audited 36784 packages in 39.346s
       found 63 low severity vulnerabilities
         run `npm audit fix` to fix them, or `npm audit` for details

-----> Build
       Running build

       > webportfolio@0.1.0 build /tmp/build_17cf925c197f17907d43d6369284d804
       > react-scripts build

       Creating an optimized production build...
       Failed to compile.

       ./src/App.js
       Cannot find file './Components/Portfolio/Portfolio' in './src'.


npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! webportfolio@0.1.0 build: `react-scripts build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the webportfolio@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/npmcache.Dfkzs/_logs/2019-03-12T01_08_21_381Z-debug.log
-----> Change to Node.js build process 
       Heroku has begun executing the "build" script defined in package.json
       during Node.js builds.
       Read more: https://devcenter.heroku.com/changelog-items/1573
-----> Build failed

       We're sorry this build is failing! You can troubleshoot common issues here:
       https://devcenter.heroku.com/articles/troubleshooting-node-deploys

       If you're stuck, please submit a ticket so we can help:
       https://help.heroku.com/

       Love,
       Heroku

 !     Push rejected, failed to compile Node.js app.
 !     Push failed

我尝试过的解决方案：

• https://devcenter.heroku.com/articles/troubleshooting-node-deploys#check-your-gitignore
• 卸载 npm 的全局实例，然后重新安装为大多数用户推荐的最新版本
• npm 重建 node-sass

我已经被困了一段时间，非常感谢任何帮助。提前致谢！

安装包

• Node.js v10.15.3 to /usr/local/bin/node
• npm v6.4.1 to /usr/local/bin/npm

Answer 1

好的...这个项目需要大量的样式表修改。

您的所有组件级别 .scss 文件都应该与需要它的component 位于同一文件夹中。任何部分文件都应该导入到需要它们的组件级scss中。您的一些样式表正在这样做，但有些则没有。此外，无论出于何种原因，您都在css 样式表中导入部分内容，并在scss 样式表中导入部分内容。只需坚持scss 样式表！

总结一下：

• component 需要使用的任何样式表都应该在 与component 相同的文件夹。
• 任何需要被多个组件使用的样式表，都应该是导入到组件级样式表中的部分文件。

现在你有部分文件，比如Sass 下的_app_portfolio.scss 文件和Portfolio.js 单独需要的组件级别Portfolio.module.scss 样式表。这是一种反模式。部分应该是reusebale stylesheets，将导入多个组件级样式表 以供重复使用。

例如，您应该像这样构建您的应用程序：（为简单起见，您的主目录文件夹应该小写）：

├── src
|   ├── components
|   |   └── Portfolio
|   |       ├── Portfolio.js
|   |       └── Portfolio.scss  (non-partial file, this component-level stylesheet contains all of styles required for Portfolio.js)
|   |   
|   ├── images
|   ├── styles
|   |   ├── base
|   |   |   └── _base.scss (partial file, include any DOM-level styles like "a" or "p", or "div", "body", "html" ... etc.)
|   |   |
|   |   ├── exts
|   |   |   └── _extensions.scss (partial file, include any extended styles like ".clear fix", which is a classname that'll contain repetitive style patterns)
|   |   |
|   |   ├── globals
|   |   |   └── globals.scss (non-partial file, include any GLOBAL stylesheets, like "normalize.css", this stylesheet will be directly imported into ./src/index.js like so: import "./styles/globals/globals.scss";)
|   |   |
|   |   ├── mixins
|   |   |   └── _mixins.scss (partial file, define your mixins that'll be shared with component-level scss)
|   |   |
|   |   ├── vars
|   |   |   └── _vars.scss (partial file, define your variables that'll be shared with component-level scss)
|   |   |
|   |   └── index.scss (OPTIONAL non-partial file that imports all of the partial files above, then this file can be imported into a component-level stylesheet. Instead of writing 4 imports for base, exts, mixins and vars, you'll just do: @import '../path/to/styles/index.scss'; now you have included all 4 partials within 1 import)
|   |
|   └── index.js

---

如何实现上述...

components/Portfolio/Portfolio.js

import React from "react";
import Profile from "../Profile/Profile";
import { portfolioContainer } from "./Portfolio.scss"; // import the className, if there are many classes, then just import them as "styles" from './stylesheet.scss'; then use: "styles.portfolioContainer", "styles.example", "styles.example2" ...etc

const Portfolio = () => {
  return (
    <div className={portfolioContainer}>
      <Profile />
    </div>
  );
};

export default Portfolio;

components/Portfolio/Portfolio.scss

@import '../../styles/vars/vars.scss'; // partial file import, now we can use $variables
@import '../../styles/mixins/mixins.scss'; // partial file import, now we can use @include mixinname();
@import '../../styles/exts/extensions.scss'; // partial file import, now we can use @extend .classname;

.portfolioContainer {
  @include grid-template-columns(1);
  color: $brightgreen;
  background: url('../../images/example.png'); // include your image imports within the component-level stylesheet -- if you import it in a partial file, then import that partial within a stylesheet, then you'll run into some pathing issues. The path defined will be relative to the partial and won't be an absolute path to the image when imported within the component-level stylesheet.
  display: flex;
  flex-flow: column wrap;
  height: 100vh;

  &::after {
    @extend .clear-fix;
  }
}

看看这个Sass Basics Guide。

如果您很难理解，请参阅我的react-starter-kit，其中包括styles/index.scss 和styles/globals/globals.scss 中的注释以及如何使用components/Home/Home.scss 中的部分并导入到components/Home/Home.js 中以及如何在src/index.js 中使用全局变量。

由于您使用的是 create-react-app，您可能需要一个 sass 编译器来将 .scss 文件编译为一个或多个 .css 文件。不幸的是，我不使用 CRA，因此您必须深入研究文档才能了解如何使用。