标签: react-create-app
react-create-app 中的全局 scss 变量
在我的 src 文件夹中，我有我的全局 scss 文件所在的资产/样式文件夹。
在我中，index.scss我像这样导入它们
@import 'assets/styles/colors.scss';
@import 'assets/styles/links.scss';
@import 'assets/styles/basics.scss';
然后在 index.js 中，我导入编译 index.css
问题：在basics.scss我使用变量 from 时colors.scss出现错误Undefined variable: \"$black\".
如果组件 scss 文件使用该文件中的变量，也会发生同样的情况。我真的不想在每个组件中都导入颜色。有没有办法让这 3 个文件全局化？
要使用 scss 做出反应，我正在使用此链接
UPD
推荐指数
解决办法
查看次数
打字稿转换es6 .js依赖于es5
我的项目中有一个假设的Typescript文件(简化示例).
Utils.ts:
import * as HelperFromNodeModules from 'helper-from-node-modules';
class Utils {
static foo() {
return HelperFromNodeModules.parse(...);
}
}
导入helper-from-node-modules包含一个Javascript文件.
helper-from-node-modules.js:
const dep = require('foo');
function parse(...) {
return bar.map((e) => {...});
}
从@types/helper-from-node-modules index.d.ts:
export function parse(...);
在tsconfig.json除其他外包含以下内容:
{
...
"target": "es5",
"lib": ["es2015.collection","es6", "dom"],
"sourceMap": true,
"allowJs": true,
...
}
所以我的问题是Typescript编译器的输出文件是我编译的源代码加上所有的重要性的巨大连接.由于helper-from-node-modules始终是.js文件,编译器似乎只是将其内容附加到输出文件.所以,尽管"target": "es5"输出文件中仍含有ES6工件,如const和(e) => {...},导致在后来的事情是希望严格错误ES5的JavaScript.
有没有办法告诉Typescript编译器/转换器在javascript依赖项上输出 …
javascript typescript ecmascript-6 tsconfig react-create-app
推荐指数
解决办法
查看次数
如何在 React 中使用两个不同的 API？
我需要在 API 中测试一个端点，但我已经使用了一个 API，而且我不想更改所有仅针对新 API 的调用。
我不知道事件是否可能，但是有没有办法在proxy里面定义多个package.json？
有什么方法可以在里面传递身份验证密钥package.json吗？
主服务器，是一个本地服务器，带有一个代理：
"proxy": {
"/api": {
"target": "http://localhost:3001/proxy",
"changeOrigin": true,
"pathRewrite": {
"^/api": ""
}
}
},
目前我正在使用axiosAPI 调用，并且该项目是从react-create-app.
推荐指数
解决办法
查看次数
如何使 React 创建应用程序生产错误边界映射到源代码
我正在使用错误边界组件来捕获反应错误并且它工作正常。
我的问题是，在生产应用程序中，日志记录是无用的，因为组件堆栈如下所示：
\n in t\n in t\n in t\n in t\n in t\n in div\n in t\n in u\n in n\n in t\n in t
而在开发环境中，组件堆栈更有用：
in ErrorPage (created by Route)\n in Route (at Routes.js:60)\n in Switch (at Routes.js:46)\n in Router (created by BrowserRouter)\n in BrowserRouter (at Routes.js:45)\n in div (at Routes.js:43)\n in ThemeProvider (at theme.js:1262)\n in Theme (at Routes.js:42)\n in Provider (at Routes.js:41)\n in ErrorBoundary (at Routes.js:40)\n in Routes (at index.js:12)
消息也是如此。在生产中，我们得到：
t.value (http://localhost:3333/static/js/main.5a3e606e.js:1:680858
在开发时：
Uncaught TypeError: Person is …推荐指数
解决办法
查看次数
react.js - 使用自定义路径运行npm run build
npm run build在react-create-app项目上运行命令会在所有文件中创建一个构建文件夹和一些默认路径,例如地图文件:
{"version":3,"sources":["../static/js/main.500cb0d9.js" ...
我可以更改构建文件夹中的所有路径以匹配我的BE,例如
{"version":3,"sources":["mywebsite/web/static/js/main.500cb0d9.js" ...
的package.json:
{
"name": "reactTest",
"version": "0.1.0",
"private": true,
"dependencies": {
"jquery": "^3.3.1",
"moment": "^2.22.1",
"react": "^16.4.1",
"react-datepicker": "^1.5.0",
"react-dom": "^16.4.1",
"react-month-picker": "^1.3.7",
"react-scripts": "1.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
推荐指数
解决办法
查看次数
React 部署到 AWS S3 生产使用 npm - index.html 文件作为最后
我有一个 React 应用程序（使用 React Create App），我想使用脚本将其上传到生产环境。我的产品是 AWS S3 存储桶。我在 package.json 中添加了一个“部署”脚本，如下所示：
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "aws s3 cp ./build s3://app.example.com --recursive --exclude \"*.DS_Store\" --cache-control public,max-age=604800 --profile production-profile"
},
这会将所有构建文件上传到生产存储桶。由于构建静态文件（css、js 等）有自己的哈希码，它们不会被每个版本覆盖，这很好。
我遇到的问题是，在其他文件完成上传之前，我不希望上传 index.html 文件。这样，一旦 index.html 被最新版本覆盖，就会自动使用新的静态文件。
知道如何实现这一目标吗？如果有更好的脚本可以将 React 应用程序上传到 S3，那就太好了。
推荐指数
解决办法
查看次数
使用 create-react-app 时 .babelrc 文件的位置是什么？
我曾经create-react-app构建过一个项目，Babel 是随安装一起打包的。通常.babelrc文件位于项目的根目录中，但我在那里没有看到。我需要修改文件中的预设之一，但似乎找不到它。
我需要手动创建.babelrc文件还是它已经包含在内？如果是这样，文件的位置是什么？
javascript ecmascript-6 babeljs babel-loader react-create-app
推荐指数
解决办法
查看次数
内联脚本，因为它违反了以下内容安全策略指令：“script-src 'self'”
我react-create-app用来构建我的 chrome 扩展。当我npm run build在 react-create-app 中使用时出现错误：
拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src 'self'”。启用内联执行需要“unsafe-inline”关键字、散列（“sha256-5='）或随机数（“nonce-...”）。
错误 index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous"
/>
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the …推荐指数
解决办法
查看次数
标签 统计
reactjs ×6
javascript ×4
ecmascript-6 ×2
amazon-s3 ×1
babel-loader ×1
babeljs ×1
npm-run ×1
npm-scripts ×1
package.json ×1
proxy ×1
tsconfig ×1
typescript ×1
webpack ×1