Question

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

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

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

第1个内置输出

-----> 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

3RD内置输出

-----> 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

GitHub

https://github.com/KenAustria/WebPortfolio

Answer 1

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

所有组件级别文件应与需要.scss的文件{strong>位于同一文件夹中。任何部分文件都应导入需要它们的组件级scss 中。您的某些样式表正在执行此操作，但有些则没有。另外，无论出于何种原因，您都将在component样式表中导入部分，并在css样式表中导入部分。只需坚持使用scss样式表即可！

总结：

scss需要使用的任何样式表都应位于与component相同的文件夹。
任何需要由许多组件使用的样式表，都应该是导入到组件级样式表中的部分文件。

现在，您有了局部文件，例如component下的_app_portfolio.scss文件和组件级Sass样式表，Portfolio.module.scss分别需要这些文件。这是一种反模式。局部应该是 reusebale样式表，它将导入到多个组件级样式表中以便重新使用。

例如，您应按以下方式构建应用程序：（为简单起见，主目录文件夹应为小写）：

Portfolio.js

如何实现以上...

components / Portfolio / Portfolio.js

├── 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

组件/Portfolio/Portfolio.scss

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;

看看这个Sass Basics Guide。

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

由于您正在使用@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编译器将create-react-app文件编译为一个或多个.scss文件。不幸的是，我没有使用CRA，因此您必须深入研究文档以了解操作方法。

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

1 个答案: