Question

我发现this plunker正在用于Ionic团队的Ionic 3.X演示。但是你能告诉我如何将.scss文件添加到那里。让我说我需要添加{{ 1}}或者可能是一个全局app/home.page.scss文件。你可以帮助我吗？

Answer 1

updated Plunker

以下是我所做的更改：

1）创建了app / home.page.scss

2）在app / home.page.ts

中添加了以下元数据

    constructor(props){
        super(props);
        this.state = {
            showSecondInput : true
        };
    }

    function handleFocus(event){
        this.state ={
            showSecondInput : false
        };
    }

    function handleBlur(event){
        this.state ={
            showSecondInput : true
        };
    }

3）在app / home.page.html

中添加了红色类

constructor(props) { super(props); this.state = {data: true}; this.onClick= this.onClick.bind(this); } onClick() { this.setState({ data : false} ); } const elements = ( <div> <label>Pick-up</label> <PlacesAutocomplete inputProps={inputProps} ref="pickupVehicle" value={this.state.pickup} onChange={this.handlepickupVehicle} onClick={this.onClick} /> </div> {this.state.data && <div> <label>Drop-off</label> <PlacesAutocomplete inputProps={inputProps2} ref="dropoffVehicle" value={this.state.destination} onChange={this.handledropoffVehicle} /> </div> } );

4）在app / home.page.scss

中添加了以下内容

styleUrls: ['app/home.page.scss']

我希望这就是你所需要的！

带有SCSS的Ionic 3 Plunker不工作

1 个答案: