小编Man*_*roi的帖子

需要<base href=""/>根据构建环境配置设置标记的href值.

例如:

分期应该有 <base href="/staging" />

产品应该有 <base href="/" />

目前的设置:

构建命令:

"build": "sh -ac '. .env.${REACT_APP_ENV}; react-scripts build'",

"build:staging": "REACT_APP_ENV=staging npm run build",

"build:prod": "REACT_APP_ENV=production npm run build",

.env.staging.js:

REACT_APP_BASE_HREF=/staging

index.html的:

....

<base href="" + process.env.REACT_APP_API_URL />

....

这在index.html中似乎不起作用.虽然类似的设置适用于JS文件

(可能是因为JS文件被解析并捆绑到一个文件中,并且捆绑器在那个时间点读取值)

事情尝试:

index.html的:

<base href=process.env.REACT_APP_API_URL />

<base href="process.env.REACT_APP_API_URL" />

<base href="%process.env.REACT_APP_API_URL%" /> (类似于PUBLIC_URL变量)

设置basename属性以及浏览器路由器也无法解决问题

我有一个元素,其:before样式必须根据计算进行修改.

export class Content extends React.Component {
    render() {
        return (
            <div className="ring-base">
               <div className="ring-left" style={{/* Change here */}}></div>
               <div className="ring-right" style={{/* Change here */}}></div>
               <div className="ring-cover">
                   <div className="ring-text">10%</div>
               </div>
            </div>
        );
    }
}

CSS代码:

.ring-base {
    position: absolute;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    background: red;
    transform: rotate(90deg);
    overflow:hidden;
}
.ring-cover {
    position: absolute;
    height: 180px;
    width: 180px;
    background: #fff;
    border-radius: 50%;
    top: 5%;
    left: 5%;
}

.ring-cover .ring-text {
    position: absolute;

    width: 100%;
    height: 100%;
    text-align: …