Can't I get the source and use only the design I want?

I bought metronic_v8.0.37 .
I use the php version.
I am Korean
I want to choose and use only the designs I want.
assets/css/style.bundle.css
I call the file in common, but can I use only the css value for the design I want without loading the above css file?

When I load the style.bundle.css file, it conflicts with other css on my site.
So, I want to select and use only the desired design (widget).

Is there a way?

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 (3)

Hi,

Metronic is a theme, not a component system so without major customizations you can't use Metronic components individually since all components depend on Bootstrap and other core libraries. Please check this tutorial to understand how SASS can be customize.

You can browse all custom component imports src/sass/components/components.scss and remove unused components.

The third party plugins customization can be opted here src/sass/vendors/plugins/_plugins.scss

Then you can compile the assets and use customized style.bundle.css and plugins.bundle.css

Regards.

Regards.

In order to use only one specific widget, all css and all js must be loaded.
What I want is to use only the .css file and the .js file for one widget.
Is this impossible?

Loading all .js files and all .css files slows down your site significantly.
This is a huge loss.

Please note that each widget is built using bootstrap framework and some global components. Widgets do not have their own CSS file.
In your case, if you load min js/css by removing unused sass imports and js libraries.

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  :(