Liferay 7.1 Theme Development

Hussein Elsayes, modified 7 Years ago.

New Member Post: 1 Join Date: 4/28/18 Recent Posts

Hello guys,

I want some help with Liferay 7.1 theme development , I installed Node,Ruby and all other dependencies to be able to run the theme generator and executed the gulp commands like the Liferay documentation says.

But when I set the extension of the theme to be styled theme , all styles are plain and It is the same as I choose unstyled theme ( I have Visual Studio Installed , so I didn't change the package.json file to have Ruby Sass)

But If I change the theme settings at package.json to take Ruby Sass as a dependency for converting scss to css, a dependency error appears

this is the log for gulp build commands by using the NodeJS Sass , and the Ruby Sass

------------------------------

NodeJS Sass (Default)

-------------------------------

C:\ub-theme>gulp build
[21:05:50] Using gulpfile C:\ub-theme\gulpfile.js
[21:05:50] Starting 'build'...
[21:05:50] Starting 'build:clean'...
[21:05:50] Finished 'build:clean' after 12 ms
[21:05:50] Starting 'build:base'...
[21:05:54] Finished 'build:base' after 3.84 s
[21:05:54] Starting 'build:src'...
[21:05:54] Finished 'build:src' after 26 ms
[21:05:54] Starting 'build:web-inf'...
[21:05:54] Finished 'build:web-inf' after 1.03 ms
[21:05:54] Starting 'build:liferay-look-and-feel'...
[21:05:54] Finished 'build:liferay-look-and-feel' after 14 ms
[21:05:54] Starting 'build:hook'...
[21:05:54] Finished 'build:hook' after 8.44 ms
[21:05:54] Starting 'build:themelets'...
[21:05:54] Starting 'build:themelet-src'...
[21:05:54] Finished 'build:themelet-src' after 878 μs
[21:05:54] Starting 'build:themelet-css-inject'...
[21:05:54] Starting 'build:themelet-js-inject'...
[21:05:54] gulp-inject Nothing to inject into _custom.scss.
[21:05:54] gulp-inject Nothing to inject into portal_normal.ftl.
[21:05:54] Finished 'build:themelet-css-inject' after 58 ms
[21:05:54] Finished 'build:themelet-js-inject' after 17 ms
[21:05:54] Finished 'build:themelets' after 73 ms
[21:05:54] Starting 'build:rename-css-dir'...
[21:05:54] Finished 'build:rename-css-dir' after 1.39 ms
[21:05:54] Starting 'build:compile-css'...
[21:05:54] Starting 'build:compile-lib-sass'...
[21:05:57] Finished 'build:compile-lib-sass' after 2.58 s
[21:05:57] Finished 'build:compile-css' after 2.59 s
[21:05:57] Starting 'build:fix-url-functions'...
[21:05:57] Finished 'build:fix-url-functions' after 34 ms
[21:05:57] Starting 'build:move-compiled-css'...
[21:05:57] Finished 'build:move-compiled-css' after 496 ms
[21:05:57] Starting 'build:remove-old-css-dir'...
[21:05:57] Finished 'build:remove-old-css-dir' after 56 ms
[21:05:57] Starting 'build:fix-at-directives'...
[21:05:57] Finished 'build:fix-at-directives' after 26 ms
[21:05:57] Starting 'build:r2'...
[21:05:57] Finished 'build:r2' after 146 ms
[21:05:57] Starting 'build:war'...
[21:05:57] Starting 'plugin:version'...
[21:05:57] Finished 'plugin:version' after 1.95 ms
[21:05:57] Starting 'plugin:war'...
[21:06:01] Finished 'plugin:war' after 3.82 s
[21:06:01] Finished 'build:war' after 3.82 s
[21:06:01] Finished 'build' after 11 s

------------------------------

Ruby Sass (By Changing the package.json --> "rubysass":"true" then gulp build again)

-------------------------------

C:\ub-theme>gulp build
[21:11:29] Warning: You must install the correct dependencies, please run npm i --save-dev from your theme directory.
C:\ub-theme\node_modules\liferay-theme-tasks\lib\doctor.js:140
throw new Error('Missing ' + missingDeps + ' theme dependencies');
^

Error: Missing 1 theme dependencies
    at haltTask (C:\ub-theme\node_modules\liferay-theme-tasks\lib\doctor.js:140:9)
    at doctor (C:\ub-theme\node_modules\liferay-theme-tasks\lib\doctor.js:56:3)
    at register (C:\ub-theme\node_modules\liferay-theme-tasks\index.js:53:2)
    at C:\ub-theme\node_modules\liferay-plugin-node-tasks\index.js:37:4
    at arrayEach (C:\ub-theme\node_modules\liferay-plugin-node-tasks\node_modules\lodash\lodash.js:516:11)
    at Function.forEach (C:\ub-theme\node_modules\liferay-plugin-node-tasks\node_modules\lodash\lodash.js:9342:14)
    at Object.module.exports.registerTasks (C:\ub-theme\node_modules\liferay-plugin-node-tasks\index.js:36:5)
    at Object.module.exports.registerTasks (C:\ub-theme\node_modules\liferay-theme-tasks\index.js:18:21)
    at Object.<anonymous> (C:\ub-theme\gulpfile.js:6:19)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Liftoff.handleArguments (C:\Users\Hussein\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:116:3)
    at Liftoff.execute (C:\Users\Hussein\AppData\Roaming\npm\node_modules\gulp\node_modules\liftoff\index.js:203:12)
    at module.exports (C:\Users\Hussein\AppData\Roaming\npm\node_modules\gulp\node_modules\flagged-respawn\index.js:51:3)
    at Liftoff.<anonymous> (C:\Users\Hussein\AppData\Roaming\npm\node_modules\gulp\node_modules\liftoff\index.js:195:5)
    at C:\Users\Hussein\AppData\Roaming\npm\node_modules\gulp\node_modules\liftoff\index.js:165:9
    at C:\Users\Hussein\AppData\Roaming\npm\node_modules\gulp\node_modules\v8flags\index.js:110:14
    at C:\Users\Hussein\AppData\Roaming\npm\node_modules\gulp\node_modules\v8flags\index.js:38:12
    at C:\Users\Hussein\AppData\Roaming\npm\node_modules\gulp\node_modules\v8flags\index.js:49:7
    at _combinedTickCallback (internal/process/next_tick.js:131:7)
    at process._tickCallback (internal/process/next_tick.js:180:9)
    at Function.Module.runMain (module.js:695:11)
    at startup (bootstrap_node.js:191:16)
    at bootstrap_node.js:612:3

By the way I found this command (npm i -save gulp-ruby-sass ) to fix this dependency issue , but all the styles were missed up in the page , here is the log after resolving this dependency

------------------------------

Ruby Sass (after resolving the dependency)

-------------------------------

C:\ub-theme>gulp build
[21:16:52] Using gulpfile C:\ub-theme\gulpfile.js
[21:16:52] Starting 'build'...
[21:16:52] Starting 'build:clean'...
[21:16:52] Finished 'build:clean' after 195 ms
[21:16:52] Starting 'build:base'...
[21:16:54] Finished 'build:base' after 1.46 s
[21:16:54] Starting 'build:src'...
[21:16:54] Finished 'build:src' after 5.69 ms
[21:16:54] Starting 'build:web-inf'...
[21:16:54] Finished 'build:web-inf' after 905 μs
[21:16:54] Starting 'build:liferay-look-and-feel'...
[21:16:54] Finished 'build:liferay-look-and-feel' after 10 ms
[21:16:54] Starting 'build:hook'...
[21:16:54] Finished 'build:hook' after 6.84 ms
[21:16:54] Starting 'build:themelets'...
[21:16:54] Starting 'build:themelet-src'...
[21:16:54] Finished 'build:themelet-src' after 682 μs
[21:16:54] Starting 'build:themelet-css-inject'...
[21:16:54] Starting 'build:themelet-js-inject'...
[21:16:54] gulp-inject Nothing to inject into _custom.scss.
[21:16:54] Finished 'build:themelet-css-inject' after 24 ms
[21:16:54] gulp-inject Nothing to inject into portal_normal.ftl.
[21:16:54] Finished 'build:themelet-js-inject' after 13 ms
[21:16:54] Finished 'build:themelets' after 41 ms
[21:16:54] Starting 'build:rename-css-dir'...
[21:16:54] Finished 'build:rename-css-dir' after 754 μs
[21:16:54] Starting 'build:compile-css'...
[21:16:54] Starting 'build:compile-ruby-sass'...
[21:16:54] directory ./
[21:16:54] error build/_css/clay/variables/_bs4-variable-overwrites.scss (Line 11: Invalid CSS after "...nput-margin-x: ": expected expression (e.g. 1px, bold), was "!default;")
[21:16:55] write ./\font_awesome.css
[21:16:56] error build/_css/clay/variables/_bs4-variable-overwrites.scss (Line 11: Invalid CSS after "...nput-margin-x: ": expected expression (e.g. 1px, bold), was "!default;")
[21:16:56] Finished 'build:compile-ruby-sass' after 2.12 s
[21:16:56] Finished 'build:compile-css' after 2.13 s
[21:16:56] Starting 'build:fix-url-functions'...
[21:16:56] Finished 'build:fix-url-functions' after 113 μs
[21:16:56] Starting 'build:move-compiled-css'...
[21:16:57] Finished 'build:move-compiled-css' after 1.01 s
[21:16:57] Starting 'build:remove-old-css-dir'...
[21:16:57] Finished 'build:remove-old-css-dir' after 44 ms
[21:16:57] Starting 'build:fix-at-directives'...
[21:16:57] Finished 'build:fix-at-directives' after 15 ms
[21:16:57] Starting 'build:r2'...
[21:16:57] Finished 'build:r2' after 48 ms
[21:16:57] Starting 'build:war'...
[21:16:57] Starting 'plugin:version'...
[21:16:57] Finished 'plugin:version' after 4.53 ms
[21:16:57] Starting 'plugin:war'...
[21:17:00] Finished 'plugin:war' after 2.79 s
[21:17:00] Finished 'build:war' after 2.8 s
[21:17:00] Finished 'build' after 7.8 s

wu yong, modified 7 Years ago.

RE: Liferay 7.1 Theme Development

New Member Posts: 2 Join Date: 9/28/18 Recent Posts

have you solve this error?I have faced with this puzzle now.

wu yong, modified 7 Years ago.

RE: Liferay 7.1 Theme Development

New Member Posts: 2 Join Date: 9/28/18 Recent Posts

I fix this error without set rubySass to true

Patrick Yeo, modified 6 Years ago.

RE: Liferay 7.1 Theme Development

Junior Member Posts: 61 Join Date: 2/8/13 Recent Posts

Hey Hussein,
The Ruby Sass error you are seeing is a bug with Clay CSS. We wanted to allow unsetting Sass variables in Clay CSS. Unfortunately, Ruby Sass doesn't allow this and is unwilling to add it as a feature. We ended up exploiting a "feature" in node-sass to get around this. My advice right now is to use node-sass. If you absolutely can't, you can create a file in your theme called

src/css/clay/variables/_bs4-variable-overwrites.scss

with:

$enable-caret: false !default;

$input-border-width: 0.0625rem !default;
$input-height: 2.375rem !default;
$input-height-lg: 3rem !default;
$input-height-sm: 1.9375rem !default;

$form-check-inline-input-margin-x: auto !default;

$table-accent-bg: #F2F2F2 !default;
$table-hover-bg: #ECECEC !default;

$table-head-bg: #FFF !default;

We ended up fixing this in Clay 2.5.1 and the issue link https://github.com/liferay/clay/issues/1270.

Edit: Gave wrong advice

Community

Company

Feedback

Ask Questions and Find Answers

Important:

Ask is now read-only. You can review any existing questions and answers, but not add anything new.

But - don't panic! While ask is no more, we've replaced it with discuss - the new Liferay Discussion Forum! Read more here here or just visit the site here:

discuss.liferay.com

Liferay 7.1 Theme Development