Unable to Build a DXP 7.1 Theme in Developer Studio

This article documents a known issue when building a theme in DXP 7.1, using Developer Studio 3.3.

Steps to Reproduce

  1. Start Liferay Developer Studio 3.3 with a 7.1 workspace project.
  2. Go to New --> Liferay Module Project with the following properties:
    1. Name: umf-v7-theme
    2. Gradle
    3. Liferay 7.1
    4. Project template: theme
  3. Delete any default contents of the folder umf-v7-theme/src/main/webapp  and paste the contents of your project into the folder umf-v7-theme/src/main/webapp.
    1. css
    2. images
    3. js
    4. templates
    5. WEB-INF
  4. In Developer Studio, right click the theme project and select "Refresh".
  5. In the Gradle Tasks menu, select the Gradle Build task for the theme.

Expected Results

Theme builds successfully.

Actual Results

Theme build fails with the following exception.

Exception in thread "main" com.liferay.sass.compiler.jni.internal.JniSassCompilerException: Error: no mixin named text-overflow

       Backtrace:
           build/buildTheme/css/portlet/_topper.scss:90
        on line 90 of build/buildTheme/css/portlet/_topper.scss
>>     @include text-overflow;
   ----------^

    at com.liferay.sass.compiler.jni.internal.JniSassCompiler.compileFile(JniSassCompiler.java:164)
    at com.liferay.css.builder.CSSBuilder._parseSass(CSSBuilder.java:380)
    at com.liferay.css.builder.CSSBuilder._parseSassFile(CSSBuilder.java:394)
    at com.liferay.css.builder.CSSBuilder.execute(CSSBuilder.java:160)
    at com.liferay.css.builder.CSSBuilder.main(CSSBuilder.java:79)
:wars:class-them:buildCSS FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':wars:class-them:buildCSS'.
> Process 'command '/usr/lib/jvm/java-8-oracle/bin/java'' finished with non-zero exit value 1

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.

BUILD FAILED

Total time: 7.752 secs

Resolution

Status: Workaround Available

One possible workaround is to add the  @import "compat/mixins";  property to src/css/_imports.scss.

As an example, see https://github.com/liferay/liferay-portal/blob/master/modules/apps/frontend-theme-porygon/frontend-theme-porygon/src/css/_imports.scss

Was this article helpful?
0 out of 0 found this helpful