Error: Incompatible units: 'rem' and 'px'.

[mmdsharifi]

Hi, when I try run gulp command to compile sass files , this is result: _Error: Incompatible units: 'rem' and 'px'. _

$ gulp
[00:40:25] Using gulpfile E:\Work\Bootstrap4\gulpfile.js
[00:40:25] Starting 'bower'...
[00:40:25] Using cwd:  E:\Work\Bootstrap4
[00:40:25] Using bower dir:  ./bower_components
[00:40:25] Starting 'icons'...
[00:40:25] Starting 'css'...
[00:40:25] Starting 'js'...
[00:40:27] Finished 'js' after 1.89 s
[00:40:27] Finished 'icons' after 1.95 s
Error in plugin 'sass'
Message:
    bower_components\bootstrap\scss\_variables.scss
 Error: Incompatible units: 'rem' and 'px'.
        on line 284 of bower_components/bootstrap/scss/_variables.scss
>> $input-height:                   (($font-size-base * $line-height) + ($input-p
   -----------------------------------^

[00:40:27] Finished 'css' after 1.99 s
[00:40:31] Finished 'bower' after 5.74 s
[00:40:31] Starting 'default'...
[00:40:31] Finished 'default' after 55 μs

and here is my codes : https://github.com/mmdsharifi/Bootstrap4-RTL

[cvrebert]

This doesn't happen with vanilla v4-dev. Presumably your error is caused by you overriding one of the Sass variable values to something that ends up being nonsensical.

[mmdsharifi]

thanks alot , but how to install this package v4-dev form bower?

[cvrebert]

Please ask how-to questions on StackOverflow, IRC, or Slack, rather than this bug tracker. Thanks!

[feryardiant]

Hi @cvrebert

I just got same issue.

feryardiant ~/.../Projek.xyz/Codes/slim-app (master)
[19:36:57] $ gulp styles
[19:43:52] Using gulpfile ~/Workspaces/Projects/Personal/Projek.xyz/Codes/slim-app/gulpfile.js
[19:43:52] Starting 'styles'...
[19:43:53] Finished 'styles' after 772 ms
[19:43:53] gulp-notify: [Error running Gulp] Error in plugin 'gulp-sass'
Message:
    res/vendor/bootstrap/scss/_popover.scss
Error:
Incompatible units:
'rem/px' and 'rem'.
        on line 112 of res/vendor/bootstrap/scss/_popover.scss
>>   @include border-radius(($border-radius-lg - $offset-border-width) ($border-r
   --------------------------^

I'm using gulp-sass and twbs-bootstrap4-alpha2 installed via bower. Here my gulp config.

// some scripts

var sassConfig = {
  precision: 6,
  indentedSyntax: false,
  sourceComments: false
}

gulp.task('styles', function () {
  gulp.src(paths.src)
    .pipe(sourcemaps.init())
    .pipe(sass(sassConfig))
    .pipe(autoprefixer(autoprefixerConfig))
    .pipe(csscomb())
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(paths.dest))

  return gulp.src(paths.src)
    .pipe(cssmin())
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest(paths.dest))
    .pipe(browserSync.reload({ stream: true }))
})

And.

Presumably your error is caused by you overriding one of the Sass variable values

yes, I override some default variable including $border-radius-lg, I've tried to remove my overrides but still no luck.

Any clue?

Thanks

[cvrebert]

@feryardiant Please ask personal support questions on StackOverflow, IRC, or Slack.