We've witnessed the e-commerce success with Hyvä themes while working on couple of projects, so we are excited to share another helpful insight! This blog will share the step-by-step process for generating CSS for the Hyvä theme in Magento 2. Customizing the styles is pivotal for creating a unique and visually appealing storefront. We'll cover the steps for production and development environments and insights into their differences.
Table of Contents
Why Generate CSS for Hyvä Theme?
Customizing the CSS of the Hyvä theme is an absolute must if you want your Magento storefront to stand out. Without generating CSS, any modifications made to your custom theme may not be reflected, which could lead to a suboptimal user experience. Don't settle for less than a visually stunning storefront - make sure your CSS is customized to perfection.
Installing Required Node Packages
Before generating CSS, ensure that all required Node packages are installed. Navigate to the Tailwind directory of your theme:
cd app/design/frontend/Navigate/default/web/tailwind/
npm install This step sets up the necessary environment for CSS generation.
Generating CSS for Production
Command for Production
To generate CSS for the production environment, please execute the following command.
cd app/design/frontend/Navigate/default/web/tailwind/
npm run build-prod Alternatively, you can run below in your root directory
npm --prefix app/design/frontend/Navigate/default/web/tailwind run build-prodAfter executing the command, a success message will confirm the creation of the minified style.css file. The file can be found at:
app/design/frontend/Navigate/default/web/css/styles.cssAfter this step, run bin/magento setup:static-content:deploy command.
This step will copy the generated
app/design/frontend/Navigate/default/web/css/styles.cssfile into the
pub/static/frontend/Navigate/default/en_US/css/styles.css directory structure so it can be loaded by browsers with Magento running in production mode.
Generating CSS During Development
Command for Development
To keep the Tailwind compiler running throughout the development process, use the following command:
cd app/design/frontend/Navigate/default/web/tailwind/
npm run watch Alternatively, you can run below in your root directory
npm --prefix app/design/frontend/Navigate/default/web/tailwind run watchThis command immediately updates the style.css file with any added CSS classes from templates without minifying it.
Conclusion
Customizing the CSS in the Hyvä theme is an essential part of creating a distinctive and attractive online store. This article provides a step-by-step process for generating and deploying CSS that works seamlessly in both production and development environments. If you have any queries or need help, please feel free to reach out through the comments section or drop us a line at info@navigatecommerce.com. Happy theming!
