[Vuejs]-How to properly load different set of CSS file in different route in Vuejs project

by

0👍

Another approach would be to load a single css file the normal way (inside header tags) and to pass a specific class to the body tag according to the layout/page. Hope you got the idea.. Ture that there will be a bit of unwanted styling but this will reduce the complexity and will enable easy code maintenance. Here’s an example:

 $h2-orange: #f60;
 $h2-green: #0f0;

 /*common styles - maintains consistancy */
 .h2 {
    font-size: 40px;
    letter-spacing: 1.5px;
    
 }

 /* Theme 1 specifics */
 .orange-theme {
     .h2 {
         color: $h2-blue;
      }
      /* other specific styles for Theme 1 */
 }

 /* Theme 2 specifics */
 .green-theme {
     .h2 {
         color: $h2-green;
      }
      /* other specific styles for Theme 2 */
 }

Leave a comment