[Vue] bootstrap 4 uses deprecated function abs()

[vw98075]

Overview of the issue

This error occurs right after the client is up with "npm start".

Compiled with problems:
×
WARNING in ./src/main/webapp/content/scss/vendor.scss (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-7.use[1]!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-7.use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-7.use[3]!./src/main/webapp/content/scss/vendor.scss)
Module Warning (from ./node_modules/sass-loader/dist/cjs.js): Deprecation Passing percentage units to the global abs() function is deprecated. In the future, this will emit a CSS abs() function to be resolved by the browser. To preserve current behavior: math.abs(100%) To emit a CSS abs() now: abs(#{100%}) More info: https://sass-lang.com/d/abs-percent node_modules/bootstrap/scss/vendor/_rfs.scss 54:14 divide() node_modules/bootstrap/scss/mixins/_grid.scss 66:15 row-cols() node_modules/bootstrap/scss/mixins/_grid-framework.scss 43:13 @content node_modules/bootstrap/scss/mixins/_breakpoints.scss 65:5 media-breakpoint-up() node_modules/bootstrap/scss/mixins/_grid-framework.scss 32:5 make-grid-columns() node_modules/bootstrap/scss/_grid.scss 72:3 @import node_modules/bootstrap/scss/bootstrap.scss 16:9 @import src/main/webapp/content/scss/vendor.scss 10:9 root stylesheet

Motivation for or Use Case

Reproduce the error

Related issues

Suggest a Fix

JHipster Version(s)

jhipster-release-8.0.0-beta.3

JHipster configuration

{
  "generator-jhipster": {
    "applicationType": "monolith",
    "authenticationType": "jwt",
    "baseName": "sample",
    "buildTool": "gradle",
    "cacheProvider": "caffeine",
    "clientFramework": "vue",
    "clientTheme": "none",
    "creationTimestamp": 1696790399863,
    "databaseType": "sql",
    "devDatabaseType": "h2Memory",
    "devServerPort": 9060,
    "enableGradleEnterprise": null,
    "enableHibernateCache": false,
    "enableSwaggerCodegen": true,
    "enableTranslation": false,
    "entities": ["Department", "Country", "Region", "Location", "Task", "Job", "JobHistory", "Employee"],
    "gradleEnterpriseHost": null,
    "jhipsterVersion": "8.0.0-beta.3",
    "jwtSecretKey": "MWMyYjVhYWM5N2UxY2ViMzY0OTlhNmRhMzQ0N2I2M2M5YjNmZWFkYTRhYWYzOTlmN2Y1Zjg5MWM1YTE3YzVmOTAzMzYxZDY5YzlmZDg5OTA2YTk5NGViNzZiYjQxOGM4ZjAyZGU1MzE3M2YwYzM0MzJmNjVlOTBkOTIwYjQzZGM=",
    "lastLiquibaseTimestamp": 1696790879000,
    "messageBroker": false,
    "microfrontend": false,
    "microfrontends": [],
    "nativeLanguage": "en",
    "packageName": "com.mycompany.myapp",
    "prodDatabaseType": "postgresql",
    "reactive": false,
    "searchEngine": false,
    "serverPort": null,
    "serverSideOptions": ["websocket:spring-websocket", "enableSwaggerCodegen:true"],
    "serviceDiscoveryType": false,
    "skipClient": false,
    "testFrameworks": [],
    "websocket": "spring-websocket",
    "withAdminUi": true
  }
}

Entity configuration(s) entityName.json files generated in the .jhipster directory

Browsers and Operating System

• [ ] Checking this box is mandatory (this is just to show you read everything)

[github-actions[bot]]

JHipster has completed the sample check .yo-rc.json: Entities JDL: Application: successfully generated Frontend check: skipped Backend check: skipped E2E check: skipped

[anothergoodguy]

I observed it on jhipster-release-8.0.0-beta.3 but it's not happening on the latest master branch. I thought it might have been fixed with some lib upgrades.

also my observation was with ./gradlew clean -Pdev bootJar.

[mshima]

It's a warning only.

[qmonmert]

it is due to bootstrap in the file node_modules/bootstrap/scss/vendor/_rfs.scss

[mshima]

There are 2 workarounds https://github.com/twbs/bootstrap/issues/39028#issuecomment-1693189126 and https://github.com/twbs/bootstrap/issues/39028#issuecomment-1697758268.

But I don't think we should use them by default.

[mraible]

@mshima Please merge or close at your convenience.

[mshima]

Duplicate of https://github.com/jhipster/generator-jhipster/issues/23865