标签: react-boilerplate

我正在使用一个(现在较旧的)版本的react-boilerplate,它带有CSS模块.它们的优点在于您可以创建变量并将其导入其他CSS文件中.

这是我的colors.css文件

:root {
  /* Status colors */
  --error: #842A2B;
  --success: #657C59;
  --pending: #666;
  --warning: #7E6939;
}

当我导入该文件时,我只需要在我的.css文件的顶部使用:

@import 'components/App/colors.css';

我希望我的网站有两个主题的选项,我希望能够使用Javascript动态更新这些变量.最好的方法是什么？

编辑:我希望有一种方法来更新colors.css文件,而不必在从两个可能的css文件中提取的所有组件中进行条件导入...让我知道是否有办法做到这一点,如果有,我会改变接受的答案.谢谢所有回答的人!

有没有人尝试将react-boilerplate集成到Ruby on Rails 5.1应用程序中？看起来在视图中嵌入React组件的5.1方法非常简单.Rails 5.1使用webpacker,它的方法是将Ruby配置与Webpack混合.这看起来并不简单,但有没有人有任何技术可以实现这一目标？

我感谢您的时间和帮助。我花了几个小时试图弄清楚这一点似乎无法追根究底。

我有这个反应组件：

import styles from './style.scss';

class ButtonComponent extends React.Component { 
  render() {
    return (
      <div className={styles.bunny}>
        hello world
      </div>
    );
  }
}

和 scss 文件：

.bunny {
  display: block;
  margin-top:50px;
  margin-bottom:55px;
  background-color: blue;
}

当我加载我的 html 时，div 没有类名，而我希望它是 <div class="bunny">

当我将类名放在 react 组件中时，就像这样：

<div className="bunny"> 

然后我可以在浏览器中看到 className。

我究竟做错了什么？

非常感谢你。

我正在开发一个带有登录页面和应用程序其余页面的应用程序(应登录查看).我正在使用 react-boilerplate.从这里example,我编辑了我的asyncInjectors.js文件redirectToLogin和redirectToDashboard方法:

//asyncInjectors.js
export function redirectToLogin(store) {
  return (nextState, replaceState) => {
    const isAuthenticated = store.getState().get('app').get('isAuthenticated');

    if (!isAuthenticated) {
      replaceState({
        pathname: '/login',
        state: {
          nextPathname: nextState.location.pathname,
        },
      });
    }
  };
}

export function redirectToDashboard(store) {
  return (nextState, replaceState) => {
    const isAuthenticated = store.getState().get('app').get('isAuthenticated');

    if (isAuthenticated) {
      replaceState('/');
    }
  }
}

然后,我只是设置redirectToLogin为onEnter页面和redirectToDashboard登录页面.

它工作正常但是当F5登录时页面刷新()时,登录页面会短暂呈现,然后呈现实际页面.登录页面只是调度一个authenticate动作componentWillMount,然后重定向componentDidUpdate:

//login.js
componentWillMount() {
  this.props.dispatch(authenticate()); …

在使用 styled-components 3.3.2 从react-boilerplate派生的应用程序中，我尝试在伪类中显示SVG，如下所示：

import arrowDown from 'images/ico-arrow-down.svg'
import arrowUp from 'images/ico-arrow-up.svg'

const Tab = styled.div`
  &:after {
    content: url("${arrowUp}");
    position: relative;
  }
  &.active:after {
    content: url("${arrowDown}");
  }
`;

但是，第一次使用会content: url("${...}")破坏块中所有以下样式定义。

在这种情况下&.active:after，样式将被忽略，而定义position: relative中的样式&:after将被解析。

SVG 看起来格式正确，并且确实经过了 url 编码。然而，经过多次测试，SVG 中破坏样式的部分似乎是transform="translate(...)"属性中的括号，它没有进行 url 编码。他们应该是吗？

如果我在后台定义中分配 SVG 而不是伪类内容，一切都会按预期工作，因此一般设置似乎不存在问题。

这是一个错误吗？如果是的话在哪里？我该如何解决这个问题（除了在背景中使用 SVG）？我可以绕过数据解析并以某种方式简单地插入 SVG 文件 URL（作为 Webpack / React 新手询问）吗？

Uncaught RangeError: Maximum call stack size exceeded由于以下原因，我收到了错误消息：

npm.babel.e5824bbfde6f57781e4f.chunk.js:1 @babel/polyfill is loaded more than once on this page. This is probably not desirable/intended and may have consequences if different versions of the polyfills are applied sequentially. If you do need to load the polyfill more than once, use @babel/polyfill/noConflict instead to bypass the warning.

仅当我使用npm run buildcommand 构建生产环境并使用http-server或提供这些文件时，才会发生这种情况serve。

我已经将React-Boilerplate与antd Theme集成在一起，并且我必须在webpack中更改配置，尽管它在开发模式下可以按预期工作，但是在为生产构建时会抛出错误。

This is my firebase-messaging-sw.js file. What i require is to fetch environment variables from my .env file. Either directly or indirectly. I have tried other answers available here but to no avail. I am using React boilerplate and those answers just don't match up for me. Is there a way i could fetch these? Any help would be appreciated.

Code right now:

 importScripts(`https://www.gstatic.com/firebasejs/7.17.1/firebase-app.js`)
 importScripts(`https://www.gstatic.com/firebasejs/7.17.1/firebase-messaging.js`)
    
    firebase.initializeApp({
        apiKey: `AIz.....Cvg5E_Q`,
        authDomain: `example.firebaseapp.com`,
        databaseURL: `https://example.firebaseio.com`,
        projectId: `projectid`,
        storageBucket: `example.com`,
        messagingSenderId: `1...7`,
        appId: `1..............30`,
    }) …

我将永远在服务器中运行react-boilerplate应用程序。我找到了永远，我不确定如何将参数传递给永远。运行服务器的命令如下：

PORT=80 npm run start:production

似乎forever start PORT=80 npm run start:production对我没有帮助。

运行命令时：npm run build我收到此错误：

clean-webpack-plugin: ..../internals/webpack/build has been removed.
Hash: e392cba8ffe45d4ccf3e                                                                
Version: webpack 3.5.5
Time: 25347ms
                                    Asset       Size  Chunks             Chunk Names
                            .htaccess.bin    1.79 kB          [emitted]  
                            manifest.json  570 bytes          [emitted]  
          0.4c78ff730ee413b0f722.chunk.js      41 kB       0  [emitted]  
          1.e85494ada20960940da1.chunk.js    2.42 kB       1  [emitted]  
          2.fbee78dcf2d2eb0c7313.chunk.js    3.47 kB       2  [emitted]  
          3.20d0e2989b358867fdd4.chunk.js    24.1 kB       3  [emitted]  
             main.0a7a3dfce71c313b3759.js    4.98 MB       4  [emitted]  main
main.7e2d77a8bd40ea6ad93420543f986fde.css    77.8 kB       4  [emitted]  main
                               index.html    1.67 kB          [emitted]  
                                    sw.js    17.8 kB          [emitted]  

ERROR in main.0a7a3dfce71c313b3759.js from UglifyJs
Invalid assignment [main.0a7a3dfce71c313b3759.js:114163,30]

Child html-webpack-plugin …

我正在为样例应用程序使用样板https://www.reactboilerplate.com/

它不提供SSR，现在出于SEO目的，我需要它。

有人可以帮助我在此样板中实施SSR吗？