Question

我使用-s选项设置了一个新的离子项目来启用SASS。

这是我的/myproject/scss.ionic.app.scss的一部分：

...
$positive:                        #2a8000 !default;
$button-font-size:                30px !default;

// Include all of Ionic
@import "www/lib/ionic/scss/ionic";

保存这个scss文件时，我可以在shell中看到启动了sass并重新构建了css：

[00:18:18] Starting 'sass'...
CSS changed:  www/css/ionic.app.css
[00:18:18] Finished 'sass' after 330 ms
CSS changed:  www/css/ionic.app.min.css

但是，新的css文件似乎完全相同，无论我放入scss文件。

你能解释一下原因吗？非常感谢。

Answer 1

非常愚蠢......

我没注意SASS在www/css/ionic.app.css中生成新的css 但是，默认离子index.html中包含的文件为lib/ionic/css/ionic.css

唯一要做的就是写作 index.html中的<link href="css/ionic.app.css" rel="stylesheet">

并删除 <link href="lib/ionic/css/ionic.css" rel="stylesheet">

Answer 2

要在我的项目中解决这个问题，我必须先安装gulp。

<head>
<style>
#container{
width:500px;
margin: 0 auto;
}
#errors{
color:red;
margin-left:200px;
}
</style>
</head>

<body>
<div id="errors"></div>
<div id="container">
    <form id="validationform">

        <label for="email">Email</label>
        <input name="email" id="email"/>

        <label for="phone">Telephone</label>
        <input name="phone" id="phone"/>

        <label for="pass">Password</label>
        <input name="pass" type="password" id="pass"/>

        <label for="cpass">Confirm Password</label>
        <input name="cpass" type="password" id="cpass"/>
        <input id="submitbutton" type="submit" value="Submit"/>
    </form>
</div>
</body>

<script>
var errormsg = "";
$("#validationform").submit(function (event) {
    event.preventDefault();

    //Regular expression started
    function isValidEmailAddress(emailAddress) {
        var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
        return pattern.test(emailAddress);
    };

    if (!isValidEmailAddress($("#email").val())) {
        alert("in emails if");
        errormsg = "please enter a valid email address";

    }
    if (!$.isNumeric($("#phone").val())) {
        alert("in phone if");
        errormsg += "<br>" + "Please enter a numeric phone number";
    }

    if ($("#pass").val() != $("#cpass").val()) {
        alert("in pass if");
        errormsg += "<br>" + "both passwords do not match";
    }

    if (errormsg = "") {
        alert("now in success if");
        alert("success");
    }
    else {
        alert("in last errors if");
        $("#errors").html(errormsg);
    }

});
</script>

为什么添加自定义SASS变量在Ionic中不起作用？

2 个答案: