Twitter bootstrap 如何使用引导4（3）混合

如何使用引导混合。我将Bootstrap4与CSS模块SCS结合使用。例如，这是输入大小的引导混合

@mixin input-size($parent, $input-height, $padding-y, $padding-x, $font-size, $line-height, $border-radius) {
  #{$parent} {
    height: $input-height;
    padding: $padding-y $padding-x;
    font-size: $font-size;
    line-height: $line-height;
    @include border-radius($border-radius);
  }

  select#{$parent} {
    height: $input-height;
    line-height: $input-height;
  }

  textarea#{$parent},
  select[multiple]#{$parent} {
    height: auto;
  }
}

如果我想使用它，我会怎么做

First.jsx

<form>
  <div className={`form-group ${styles.formula}`}>
    <label htmlFor='exampleInputEmail1'>Email address</label>
    <input type='email' className='form-control' id='exampleInputEmail1' aria-describedby='emailHelp' placeholder='Enter email' />
    <small id='emailHelp' className='form-text text-muted'>We'll never share your email with anyone else.</small>
  </div>

<form>
  <div className={`form-group ${styles.formula}`}>
    <label htmlFor='exampleInputEmail1'>Email address</label>
    <input type='email' className={`form-control ${styles.formControl}`} id='exampleInputEmail1' aria-describedby='emailHelp' placeholder='Enter email' />
    <small id='emailHelp' className='form-text text-muted'>We'll never share your email with anyone else.</small>
   </div>

*更新 修好了。 CSS模块和引导类命名组合似乎有问题。我设法这样解决了它

First.jsx

<form>
  <div className={`form-group ${styles.formula}`}>
    <label htmlFor='exampleInputEmail1'>Email address</label>
    <input type='email' className='form-control' id='exampleInputEmail1' aria-describedby='emailHelp' placeholder='Enter email' />
    <small id='emailHelp' className='form-text text-muted'>We'll never share your email with anyone else.</small>
  </div>

<form>
  <div className={`form-group ${styles.formula}`}>
    <label htmlFor='exampleInputEmail1'>Email address</label>
    <input type='email' className={`form-control ${styles.formControl}`} id='exampleInputEmail1' aria-describedby='emailHelp' placeholder='Enter email' />
    <small id='emailHelp' className='form-text text-muted'>We'll never share your email with anyone else.</small>
   </div>

---

确保将正确的参数值传递给mixin。比如说,

@import "bootstrap";
.my-custom-input {  
  @include input-size('.form-control', 70px, 12px, 12px, 32px, 5em, 0)
}  

---

更新在Bootstrap 4 Beta版中，

输入大小

mixin已被删除。

我肯定缺少一些明显的东西。它仍然不起作用。我更新了问题，你能看一下吗。

.formula

应该应用于

.form控件的父控件。。例如，
表单组
尝试改变它（更新了第一个有问题的.jsx），但仍然没有运气。没有其他方法可以尝试。正如您所看到的，Codeply是有效的，因此.formula类不能正确地应用于HTML.Thank。我设法把它修好了。请参阅所讨论的解决方案。谢谢你让我走上了正确的道路。我还有一个问题。我使用CSS模块、mixin和Bootstrap为每个组件单独设计样式。我想使用bootstrap附带的_custom.scss文件来全局设置所有内容的样式。如果我在_custom.scss中更改样式，它会工作，但如果我删除节点模块，则所有内容都会消失。是否有办法在节点模块外提取/使用_custom.scs？