Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

How to integrate only the SCSS of Keen themes with Next.js?


Hello. I'm building a next js app with my team and as we lack designers, we bought keen bootstrap 5 to try and use your styles on our next js components. However, it comes with a lot of html and js that we don't want to use, as we only want the styling (scss) files. I tried copying and pasting the folder with those files (keen_html_v3.0.8_demo9/demo9/src/sass) inside my project and importing them, but it doesn't seem to work, as these paths on the _init.scss file does not exist:

@import "../../../tools/node_modules/bootstrap/scss/functions";
@import "../../../tools/node_modules/bootstrap/scss/variables";
@import "../../../tools/node_modules/bootstrap/scss/variables-dark";
@import "../../../tools/node_modules/bootstrap/scss/maps";
@import "../../../tools/node_modules/bootstrap/scss/mixins";
@import "../../../tools/node_modules/bootstrap/scss/utilities";

I'm sure the this ui kit wasn't meant to be used this way, but what can I do to be able to make it work?


user
Gabriel Loli 1 year ago
Bootstrap Next.js
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

user
Sean Author 1 year ago

Hi,

Keen is an HTML template and using it with Next.js is quite complex task.

Instead we offer you Metronic as it will come with complete Next.js version with generic react components:


You can purchase Metronic http://keenthemes.com/metronic now and get 10 demos for nextjs by emailing us via support@keenthemes.com

Regards,
Sean


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(