Mdb-ui-kit: File to import not found or unreadable: bootstrap/scss/functions

[rajavijayavendan]

Hi,
I am trying to integrate bootstrap-material-design into my sass based angular4 application.

Here are the version details
angular/cli: 1.2.0
node: 6.10.3
bootstrap-material-design:^4.0.0-beta.3
bootstrap-sass:^3.3.7

my .angular-cli.json

"styles": [        
        "../node_modules/bootstrap-material-design/scss/bootstrap-material-design.scss",        
        "styles.scss"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/popper.js/dist/popper.min.js",
        "../node_modules/bootstrap-material-design/dist/js/bootstrap-material-design.js"
      ]

When I do ng serve, I get the following error:

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./~/bootstrap-ma
terial-design/scss/bootstrap-material-design.scss
Module build failed:
undefined
^
      File to import not found or unreadable: bootstrap/scss/functions.
Parent style sheet: E:/MyRepos/scss-app/node_modules/bootstrap-material-design/scss/_variables.scss
      in E:\MyRepos\scss-app\node_modules\bootstrap-material-design\scss\_variables.scss (line 45, column 1)
 @ ./~/bootstrap-material-design/scss/bootstrap-material-design.scss 4:14-178
 @ multi ./~/bootstrap-material-design/scss/bootstrap-material-design.scss ./src/styles.scss

and it fails to compile.

I tried adding the bootstrap sass folder preceding the material design css path in styles[angular-cli.json] as shown

      "styles": [
        "../node_modules/bootstrap-sass/assets/stylesheets/bootstrap",
        "../node_modules/bootstrap-material-design/scss/bootstrap-material-design.scss",        
        "styles.scss"
      ],

But no success

Please help me.

[FezVrasta]

I think you'll be able to find help asking on StackOverflow.

[rajavijayavendan]

Sorry. I have already looked for helping threads in stackoverflow , I couldn't find one..

[lucabartoli]

The bootstrap 4 alpha 6 from npm lacks of functions.scss.
To solve, remove bootstrap package and then install npm install [email protected]

[cpapidas]

@lucabartoli thank you very much, it works fine.

Just follow the steps bellow:

• npm install [email protected] --save don't worry you will not load the hole bootstrap
• add the following line in the top of your style.scss file
  @import '../node_modules/bootstrap/scss/functions';

So your style scss should look like this:

@import '../node_modules/bootstrap/scss/functions';
@import '../node_modules/bootstrap-material-design/scss/bootstrap-material-design';
// rest code here ...

[ijunaid8989]

It's not working in the latest version of Bootstrap, and there is nothing like the functions directory in the above-mentioned version as well.

[jordantogether]

The tilde operator provided is used within a bundler to refer to the node_modules folder. Use webpack or rollup as this project uses, and compile your SCSS that way. Then the bundler will read the relative paths and replace them with the node_modules path. This requires that you npm i bootstrap as a prerequisite, of course, otherwise it'll fail to find that within the directory.

[FezVrasta]

We had this paragraph in the docs but it got lost somehow:
https://github.com/FezVrasta/bootstrap-material-design/commit/b1139a7fd9f61cd6c4b11a7d7e9677e71bc274cb#diff-c3ba18e675f8dd613bdb6d34c5f8206dR1260

if someone wants to send a PR to add it back I think it'd be helpful