Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

angular 15.2.9


am trying to use the custom styles in my project and I can't
I am getting now errors
will tell you the steps till i get the error
first create angular project with this version 15.2.9
then i add ngbootsrap wo my project
then copy all sass folder and subfolder into my project
then do this import in my style.scss file

@import "./assets/sass/style.scss";
// Replace above style with this css file to enable RTL styles
// @import "./assets/css/style.rtl";
@import './assets/sass/plugins.scss';
// @import "./assets/css/style.rtl.css";
@import "./assets/sass/style.angular.scss";

// Keenicons - High quality and pixel perfect font icons available in 3 styles, duotone, outline and solid for Metronic elements
@import "./assets/plugins/keenicons/duotone/style.css";
@import "./assets/plugins/keenicons/outline/style.css";
@import "./assets/plugins/keenicons/solid/style.css";


i can't serve or build the project i get this error

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: 1.75rem and 0.5em have incompatible units.
â•·
868 │ $form-check-padding-start: $form-check-input-width + .5em !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
bootstrap/scss/_variables.scss 868:43 @import
src/assets/sass/_init.scss 19:9 @import
src/assets/sass/style.scss 6:9 @import
src/styles.scss 2:9 root stylesheet

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: 2em and 0.5rem have incompatible units.
â•·
625 │ $form-switch-padding-left: $form-switch-width + .5rem !default;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/assets/sass/core/components/_variables.scss 625:53 @import
src/assets/sass/_init.scss 26:9 @import
src/assets/sass/style.scss 6:9 @import
src/styles.scss 7:9 root stylesheet

could you please advice ?


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


Hi abdelrhman hadidy

Have you tried running a fresh installation of the Angular project without adding your custom styles? This will help determine if the issue is related to your custom styles or if it's a separate problem. By testing the project without your custom styles, you can see if it works correctly and identify if the errors are specific to your customizations.

Thanks



sorry 15.2.0 this is angular version


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(