Import styles mdb.pro.scss

Topic: Import styles mdb.pro.scss

Bochagova priority asked 2 years ago

Hello.I update my app for MDB Angular 4 up to MDB Angular 5.When I add in angular.json -> styles -> "../../../node_modules/ng-ui-kit/assets/scss/mdb.pro.scss", I got next error

../../../node_modules/ng-ui-kit/assets/scss/mdb.pro.scss - Error: Module build failed (from ../../../node_modules/sass-loader/dist/cjs.js):SassError: Can't find stylesheet to import. ╷ 9 │ @import './pro/animate'; │ ^^^^^^^^^^^

Can u help me with this?

Add comment

Grzegorz Bujański staff answered 2 years ago

0 0 Best answer

Try importing mdb.scss instead of mdb.pro.scss.

Bochagova priority commented 2 years ago

if I importing mdb.scss, I have message ../../../node_modules/ng-ui-kit/assets/scss/mdb.scss.webpack[javascript/auto]!=!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!../../../node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!../../../node_modules/ng-ui-kit/assets/scss/mdb.scss - Warning: Module Warning (from ../../../node_modules/postcss-loader/dist/cjs.js):

Please insert min. 15 characters.

Grzegorz Bujański staff commented 2 years ago

Unfortunately, I am not able to reproduce this error. Please describe exactly how you added our library and how we can reproduce this. Additionally, now I noticed that you import this from node_modules/ng-ui-kit. Are you sure you installed our package correctly? After installing MDB5, node modules should contain the mdb-angular-ui-kit folder, not ng-ui-kit.

Bochagova priority commented 2 years ago

I renamed and now I have ../../../node_modules/mdb-angular-ui-kit/assets/scss/mdb.scss.webpack[javascript/auto]!=!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!../../../node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!../../../node_modules/mdb-angular-ui-kit/assets/scss/mdb.scss - Warning: Module Warning (from ../../../node_modules/postcss-loader/dist/cjs.js):

my package.json "@angular/animations": "^14.2.8", "@angular/cdk": "^14.2.6", "@angular/common": "^14.2.8", "@angular/compiler": "^14.2.8", "@angular/core": "^14.2.8", "@angular/forms": "^14.2.8", "@angular/platform-browser": "^14.2.8", "@angular/platform-browser-dynamic": "^14.2.8", "@angular/router": "^14.2.8","mdb-angular-ui-kit": "git+https://*@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-essential",

<p>I renamed and now I have ../../../node_modules/mdb-angular-ui-kit/assets/scss/mdb.scss.webpack[javascript/auto]!=!../../../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!../../../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!../../../node_modules/resolve-url-loader/index.js??ruleSet[1].rules[5].rules[1].use[0]!../../../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[5].rules[1].use[1]!../../../node_modules/mdb-angular-ui-kit/assets/scss/mdb.scss - Warning: Module Warning (from ../../../node_modules/postcss-loader/dist/cjs.js):</p>

<p>my package.json "@angular/animations": "^14.2.8", "@angular/cdk": "^14.2.6", "@angular/common": "^14.2.8", "@angular/compiler": "^14.2.8", "@angular/core": "^14.2.8", "@angular/forms": "^14.2.8", "@angular/platform-browser": "^14.2.8", "@angular/platform-browser-dynamic": "^14.2.8", "@angular/router": "^14.2.8","mdb-angular-ui-kit": "git+https://*@git.mdbootstrap.com/mdb/angular/mdb5/prd/mdb5-angular-ui-kit-pro-essential",</p>

Please insert min. 15 characters.

Arkadiusz Idzikowski staff commented 2 years ago

Did you follow all the steps from our installation guide?

https://mdbootstrap.com/docs/angular/pro/installation/#section-advanced-installation

Please make sure to choose SCSS stylesheets in your Angular app configuration as mentioned in the step 1.

Add comment