Unable to import ripple material component

[otatechie]

Hello, am trying to makes changes and customize using the styles.scss but am unable to import I get this error. @use '@material/animation/functions' as functions2;. Please can you assist me

[davidtmiller]

When using the ripple component, you shouldn't need to import anything other past the @use "@material/ripple"; that is within the _ripple.scss file. From there, it would be best to use the ripple utility class, as referenced on this page: https://material-admin-pro.startbootstrap.com/utilities-ripples.html.

What sorts of changes have you made to the SCSS? That would help in determining where this error is coming from. Thanks!

[otatechie]

I want to remove some components from the styles.scss like the simple datatables but I get this error

Compilation Error Error: Undefined variable. ╷ 42 │ $top-app-bar-nav-link-height: $app-bar-base-height;

so am unable to remove the components I don't need and recompile using the sass compiler

[davidtmiller]

The $app-bar-base-height variable is defined in the _spacing.scss file. If that file was deleted, or that variable removed, then you will get errors when compiling anything that uses that variable.

Either add that variable back into your project, or change the value of the $top-app-bar-nav-link-height to use a custom value.

[otatechie]

// Spacing variables for navigation components $app-bar-base-height: 4.5rem; $drawer-base-width: 279px;

These are the only variables that came in the _spacing.scss default, I did not mess with anything

[davidtmiller]

Is the _spacing.scss file being imported in the the _variables.scss file before importing any of the other variables files? If so, the spacing file needs to load before the body variables. If it loads after something that references one of the variables within it, then the SCSS build will error. Let me know if this helps!

[otatechie]

Hello, am trying to makes changes and customize using the styles.scss but am unable to import I get this error. @use '@material/animation/functions' as functions2;. Please can you assist me

@davidtmiller thanks earlier on is fixed but still back to same issue here

[davidtmiller]

Try running a new npm install just in case the ripple files aren't in node_modules. Also, the file path should not be necessary with how our scripts are set up, so you should be able to use this instead:

// * * * * * * * * * * * * *
// * * Import Bootstrap  * *
// * * * * * * * * * * * * *

@import 'bootstrap/scss/bootstrap';

// * * * * * * * * * * * * * * * * * * * * *
// * * Import Ripple Material Component  * *
// * * * * * * * * * * * * * * * * * * * * *

@import '@material/ripple/styles';

If anything else, you can log into Start Bootstrap and access your account downloads and re-download the updated version of the theme and start from there. Let me know if this helps!

[otatechie]

@davidtmiller unfortunately it is still not working after downloading the updated version, same old error. Please is it possible if you could download and try replicating to see.

Compilation Error Error: Can't find stylesheet to import. ╷ 28 │ @use '@material/animation/functions' as functions2;