Message Boards

  1. Home
  2. Development
  3. 7.1 Theme build issue buildCSS Fails on _topper.scss "text-overflow" mixin

7.1 Theme build issue buildCSS Fails on _topper.scss "text-overflow" mixin

thumbnail
Daniel Tyger, modified 5 Years ago.

7.1 Theme build issue buildCSS Fails on _topper.scss "text-overflow" mixin

Regular Member Posts: 105 Join Date: 2/6/13 Recent Posts

Just 2 days ago, I downloaded the latest available DXP DevStudio (for Mac OS)- 

Version: 3.3.0.201808240530-ga1- and was trying to recreate the 7.1 Classic theme, which has many improvements that we'd like to carry forward.

 

I'm having a small problem w the build which seems related to the themeBuilder process buildCSS, which I apparently have no control over... Here's what's happening / error that is thrown...:

 

Working Directory: /Users/daniel.tyger/Documents/LR71DXPStudio/liferay-workspace/wars

Gradle User Home: /Users/daniel.tyger/.gradle

Gradle Distribution: Gradle wrapper from target build

Gradle Version: 3.0

Java Home: /Library/Java/JavaVirtualMachines/jdk1.8.0_131.jdk/Contents/Home

JVM Arguments: None

Program Arguments: None

Build Scans Enabled: false

Offline Mode Enabled: false

Gradle Tasks: buildCSS

 

:wars:umf-v7-theme:buildTheme UP-TO-DATE

:wars:umf-v7-theme:buildCSS

Using native Sass compiler

SLF4J: Failed to load class "org.slf4j.impl.StaticLoggerBinder".

SLF4J: Defaulting to no-operation (NOP) logger implementation

SLF4J: See http://www.slf4j.org/codes.html#StaticLoggerBinder for further details.

Parsed /css/clay/atlas-variables.scss in 751ms

Parsed /css/clay/atlas.scss in 2510ms

Parsed /css/clay/base-variables.scss in 198ms

Parsed /css/clay/base.scss in 1730ms

Parsed /css/clay/bootstrap/bootstrap-grid.scss in 161ms

Parsed /css/clay/bootstrap/bootstrap-reboot.scss in 50ms

Parsed /css/clay/bootstrap/bootstrap.scss in 483ms

Parsed /css/clay/bootstrap.scss in 428ms

Parsed /css/clay/site/site-atlas-font-awesome.scss in 1919ms

Parsed /css/clay/site/site-lexicon-font-awesome.scss in 1471ms

Parsed /css/clay/site/site-main.scss in 806ms

Parsed /css/clay.scss in 1693ms

Parsed /css/compat/third_party/font_awesome_alloy/scss/font-awesome-ie7.scss in 45ms

Parsed /css/compat/third_party/font_awesome_alloy/scss/font-awesome.scss in 117ms

Parsed /css/font-awesome/scss/font-awesome-ie7.scss in 43ms

Parsed /css/font-awesome/scss/font-awesome.scss in 65ms

Parsed /css/font_awesome.scss in 65ms

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)

...

 

And, sure enough in the files that end up in the gradle build folder _topper.scss does have a mixin "text-overflow" kinking up the build.

 

I tried swapping out some earlier dependencies, which also failed.

 

Here is the build.gradle file that is created when I created a base theme in DevStudio...:

"

buildscript {

dependencies {

classpath group: "com.liferay", name: "com.liferay.gradle.plugins.theme.builder", version: "2.0.4"

}

 

repositories {

maven {

url "https://repository-cdn.liferay.com/nexus/content/groups/public"

}

}

}

 

apply plugin: "com.liferay.portal.tools.theme.builder"

 

dependencies {

parentThemes group: "com.liferay", name: "com.liferay.frontend.theme.styled", version: "3.0.4"

parentThemes group: "com.liferay", name: "com.liferay.frontend.theme.unstyled", version: "3.0.4"

 

portalCommonCSS group: "com.liferay", name: "com.liferay.frontend.css.common", version: "3.0.1"

 

themeBuilder group: "com.liferay", name: "com.liferay.portal.tools.theme.builder", version: "1.1.5"

}

 

How can we get a 7.1 Classic theme to build in the new Dev Studio?

 

Is there any workaround for this in the meanwhile?

 

Thank you for any insights...

thumbnail
Daniel Tyger, modified 5 Years ago.

RE: 7.1 Theme build problem buildCSS Fails on _topper.scss "text-overflow"

Regular Member Posts: 105 Join Date: 2/6/13 Recent Posts

Note - I did try changing a couple of the dependencies a bit to see if that helped (e.g. ""com.liferay.portal.tools.theme.builder", version: "1.1.5" > 1.1.6 - and it did not change the results.

I also tried adding the Classic parent to the mix which also did not change the results...

thumbnail
Alex Arriaga, modified 5 Years ago.

RE: 7.1 Theme build issue buildCSS Fails on _topper.scss "text-overflow" mi

New Member Posts: 4 Join Date: 11/7/17 Recent Posts

Hi,

We are also getting the exact same error when building our Liferay theme by using the "liferay-theme-generator" from NPM (via the "gulp build" task). Have you found anything else regarding this issue?

 

 

thumbnail
Alex Arriaga, modified 5 Years ago.

RE: 7.1 Theme build issue buildCSS Fails on _topper.scss "text-overflow" mi

New Member Posts: 4 Join Date: 11/7/17 Recent Posts

In the meantime, this is what the text-overflow mixin does behind the scenes (you can place it in any SASS partial):

    
// Text truncate
// Requires inline-block or block for proper styling

@mixin text-truncate() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin text-overflow() {
  @include text-truncate();
}

I added it to my "_imports.scss" file:

    
@import "clay_custom";

@import "bourbon";

// Text truncate
// Requires inline-block or block for proper styling

@mixin text-truncate() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin text-overflow() {
  @include text-truncate();
}
@import "mixins";

@import "clay/atlas-variables";

Best regards.

thumbnail
Daniel Tyger, modified 5 Years ago.

RE: 7.1 Theme build issue buildCSS Fails on _topper.scss "text-overflow" mi

Regular Member Posts: 105 Join Date: 2/6/13 Recent Posts

Alex - thank you, kindly for posting your issue, as well - and for that workaround, which also works for me.

 

I did up my dependencies, as well and these all work out and are a tad newer than what the IDE spits out when creating a theme project...:

for gradle anyway...:

buildscript {

dependencies {

classpath group: "com.liferay", name: "com.liferay.gradle.plugins.theme.builder", version: "2.0.4"}

repositories {

maven {

url "https://repository-cdn.liferay.com/nexus/content/groups/public"

}}}

apply plugin: "com.liferay.portal.tools.theme.builder"

dependencies {

parentThemes group: "com.liferay", name: "com.liferay.frontend.theme.styled", version: "3.0.5"

parentThemes group: "com.liferay", name: "com.liferay.frontend.theme.unstyled", version: "3.0.5"

portalCommonCSS group: "com.liferay", name: "com.liferay.frontend.css.common", version: "3.0.1"

themeBuilder group: "com.liferay", name: "com.liferay.portal.tools.theme.builder", version: "1.1.6"

}

 

thumbnail
Alex Arriaga, modified 5 Years ago.

RE: 7.1 Theme build issue buildCSS Fails on _topper.scss "text-overflow" mi

New Member Posts: 4 Join Date: 11/7/17 Recent Posts

Hi Daniel,

That's great! Hopefully the Liferay team solves this issue soon.

Best regards.

thumbnail
shyam sunder sharma, modified 4 Years ago.

RE: 7.1 Theme build problem buildCSS Fails on _topper.scss "text-overflow"

New Member Posts: 8 Join Date: 4/5/13 Recent Posts
It worked fine for me, thanks emoticon
thumbnail
Ethan Bustad, modified 5 Years ago.

RE: 7.1 Theme build issue buildCSS Fails on _topper.scss "text-overflow" mi

Junior Member Posts: 26 Join Date: 8/23/12 Recent Posts

I recently encountered this issue as well, and found that adding

@import "compat/mixins";

to

src/css/_imports.scss

does the trick.

 

An example of this in Liferay code can be seen here: https://github.com/liferay/liferay-portal/blob/master/modules/apps/frontend-theme-porygon/frontend-theme-porygon/src/css/_imports.scss

Prashanth Relekar, modified 5 Years ago.

RE: 7.1 Theme build issue buildCSS Fails on _topper.scss "text-overflow" mi

New Member Posts: 17 Join Date: 9/20/18 Recent Posts

Thanks Ethan. Your solution worked for me.