Upgrading the theme: Can't find stylesheet to import errors

Issue

• How many ways to build and upgrade the theme?

Environment

• Liferay DXP [all version]

Resolution

• There are three ways of upgrading the theme:
  1. Client Extension 
  2. Gulp
  3. Gradle

• If the user is updating to a version that supports the themeCSS client extension, Liferay recommends migrating to it. This can be a bit of work since it requires using master and content pages instead of widget pages, so it must align with the priorities. The ThemeCSS client extension is only available on 7.4.

• However, for DXP 7.3, the user can take a different approach, which is Gulp or Gradle, although for building .war themes, Liferay would slightly recommend the Gulp approach over Gradle since the Gradle build is unable to handle minifying files and sometimes it also fails to create the RTL version when CSS custom properties are used. If either of these features is needed, the gulp build is necessary, but both are supported.

Additional Information

• However, while using the gulp to upgrade the theme, the user might observe the below errors:
  

  Error: Can't find stylesheet to import. 
  ╷
  1 │ @import "/home/me/puma-energy-theme/node_modules/node-bourbon/node_modules/bourbon/app/assets/stylesheets/bourbon";@import "/home/me/puma-energy-theme/node_modules/liferay-frontend-common-css/_bourbon_ext.scss";

  • To resolve these errors, the user needs to include the missing mixins in their theme through a file called _bourbon.scss. They can just drop it in the css directory and it should be built.
  • Here is the code:
    

    @mixin display($value) {
    	display: $value;
    }
    
    @mixin ellipsis {
    	display: inline-block;
    	max-width: 100%;
    	overflow: hidden;
    	text-overflow: ellipsis;
    	white-space: nowrap;
    	word-wrap: normal;
    }
    
    @mixin hide-text {
    	overflow: hidden;
    	text-indent: 101%;
    	white-space: nowrap;
    }
    
    @mixin prefixer($property, $value, $prefix) {
    	-#{$prefix}-#{$property}: $value;
    }
    
    @mixin transform($value) {
    	transform: $value;
    }
    
    @mixin word-wrap($value) {
    	word-wrap: $value;
    }