Sass bootstrap 无法设置文本区域的高度

Question

我有一个这样的管理页面：

<div class="admin_page">
    <div ng-repeat="user in users">
        <div class="my-form-group">
            <textarea class="my-form-control">{{user}}</textarea>
        </div>
    </div>
</div>

这是我的 main.scss 文件：

.my-form-group {
  @extend .form-group;

  .my-form-control {
    @extend .form-control
  }
}

@import "./admin.scss";

这是我的admin.scss：

.admin_page {
  textarea {
    height: 200px;
  }
}

未设置文本区域的高度。

我试过 <textarea class="my-form-control" style="height:200px">{{user}}</textarea> 并且有效。

为什么 sass 版本不工作？

编辑：

这是我的标题：

    <!--underscore-->
    <script src="/node_modules/underscore/underscore-min.js"></script>

    <!--jquery-->
    <script src="/node_modules/jquery/dist/jquery.min.js"></script>

    <!--bootstrap (keep the css although duplicate in bundle, since some may depend on it)-->
    <script src="/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">

    <!--font-awesome-->
    <link rel="stylesheet" href="/node_modules/font-awesome/css/font-awesome.min.css">


    <!--summernote-->
    <link rel="stylesheet" href="/node_modules/summernote/dist/summernote.css">
    <!--<link rel="stylesheet" href="/node_modules/summernote/dist/summernote-bs3.css">-->
    <script src="/node_modules/summernote/dist/summernote.min.js"></script>


    <!--angular-->
    <script src="/node_modules/angular/angular.min.js"></script>
    <script src="/node_modules/angular-resource/angular-resource.min.js"></script>
    <script src="/node_modules/angular-route/angular-route.min.js"></script>
    <script src="/node_modules/angular-sanitize/angular-sanitize.min.js"></script>

    <!--angular-summernote-->
    <script src="/node_modules/angular-summernote/dist/angular-summernote.min.js"></script>

    <!--bundle-->
    <script src="/public/script/bundle.js"></script>
    <link rel="stylesheet" type="text/css" href="/public/style/bundle.css">

请注意，我在 main.scss 中导入了 bootstrap 的 sass 版本，这意味着在捆绑包中我有 bootstrap css。我包含原始 non-sass 版本 bootstrap 的原因是为了 summernote，它取决于 bootstrap。

编辑 2：我尝试了以下方法：

.admin_page {
  .my-textarea {
    @extend .my-form-control;
    height: 500px;
  }
}

它的特异性为 0,0,2,0 (2 类)，它不起作用

还有这个：

.admin_page {

  textarea.my-form-control {
    height: 200px
  }
}

它的特异性为 0,0,2,1（2 类 + 1 个元素），它有效。为什么上一个不起作用？

Answer 1

这不是 sass 的问题。这显然是特异性的问题。

你只需要提到高特异性css。因为你有一个 class 到文本区域，你可以这样做：

textarea.my-form-control{
     height: 200px;
}

阅读 this 以了解特异性在 css 中的工作原理。

Sass bootstrap 无法设置文本区域的高度

Sass bootstrap unable to set height of textarea

css

sass

twitter-bootstrap