使用 Node-SASS 和 CSS 模块的 Create-React-App v2 在本地工作但在 Heroku 中崩溃
Create-React-App v2 with Node-SASS and CSS Modules works locally but crashes in Heroku
我正在使用 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 重建节点-sass
我被困了一段时间，非常感谢任何帮助。提前致谢！
安装包
• Node.js v10.15.3 to /usr/local/bin/node
• npm v6.4.1 to /usr/local/bin/npm
好的...这个项目需要大量的样式表修改。
您的所有 组件级别 .scss 文件应与 component 位于同一文件夹需要它。任何 部分文件 都应该 在需要它们的组件级 scss 中导入。您的一些样式表正在这样做，但有些则没有。此外，无论出于何种原因，您都在 css 样式表中导入部分内容，并在 scss 样式表中导入部分内容。坚持使用 scss 样式表！
总结一下：
component 需要使用的任何样式表都应该在
与 component.- 任何需要被多个组件使用的样式表，都应该是导入组件级样式表的部分文件。
现在您有部分文件，例如 Sass 下的 _app_portfolio.scss 文件和 Portfolio.js 单独需要的组件级别 Portfolio.module.scss 样式表。这是一个反模式。部分应该是 可重复使用的样式表，它将导入多个 组件级样式表 以供重复使用。
例如，您应该像这样构建您的应用程序：（为了简单起见，您的主目录文件夹应该是小写字母）：
├── 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, which includes notes within styles/index.scss and styles/globals/globals.scss and how to utilize partials in components/Home/Home.scss and be imported into components/Home/Home.js and how to utilize globals in src/index.js。
因为您使用的是 create-react-app，您可能需要一个 sass 编译器来将 .scss 文件编译成一个或多个 .css 文件。不幸的是，我不使用 CRA，因此您必须深入研究文档以了解具体方法。
我正在使用 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 重建节点-sass
我被困了一段时间，非常感谢任何帮助。提前致谢！
安装包
• Node.js v10.15.3 to /usr/local/bin/node
• npm v6.4.1 to /usr/local/bin/npm
好的...这个项目需要大量的样式表修改。
您的所有 组件级别 .scss 文件应与 component 位于同一文件夹需要它。任何 部分文件 都应该 在需要它们的组件级 scss 中导入。您的一些样式表正在这样做，但有些则没有。此外，无论出于何种原因，您都在 css 样式表中导入部分内容，并在 scss 样式表中导入部分内容。坚持使用 scss 样式表！
总结一下：
component需要使用的任何样式表都应该在 与component. 相同的文件夹
- 任何需要被多个组件使用的样式表，都应该是导入组件级样式表的部分文件。
现在您有部分文件，例如 Sass 下的 _app_portfolio.scss 文件和 Portfolio.js 单独需要的组件级别 Portfolio.module.scss 样式表。这是一个反模式。部分应该是 可重复使用的样式表，它将导入多个 组件级样式表 以供重复使用。
例如，您应该像这样构建您的应用程序：（为了简单起见，您的主目录文件夹应该是小写字母）：
├── 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, which includes notes within styles/index.scss and styles/globals/globals.scss and how to utilize partials in components/Home/Home.scss and be imported into components/Home/Home.js and how to utilize globals in src/index.js。
因为您使用的是 create-react-app，您可能需要一个 sass 编译器来将 .scss 文件编译成一个或多个 .css 文件。不幸的是，我不使用 CRA，因此您必须深入研究文档以了解具体方法。