Search code examples
liferayliferay-7liferay-theme

How to fix build error which file to import _custom.scss or custom.css?


I have a theme compatible with Liferay 7 (Ant-based). I tried to optimize the plugin for Liferay Portal CE 7.0.

I migrated the theme from plugin sdk to the Liferay Theme Generator and I get the following error when I run gulp build:

C:\Users\User1\liferay-workspace\themes\new-theme\node_modules\liferay-theme-tasks\tasks\build.js:347
            throw err;
            ^
Error: build\_css\main.scss
Error: It's not clear which file to import for '@import "custom"'.
       Candidates:
         _custom.scss
         custom.css
       Please delete or rename all but one of these files.
        on line 19 of build/_css/main.scss
>> @import "custom";
   ^

    at options.error (C:\Users\User1\liferay-workspace\themes\new-theme\node_modules\node-sass\lib\index.js:286:26)

:themes:new-theme:gulpBuild FAILED

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':themes:new-theme:gulpBuild'.
> Process 'command 'cmd'' 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

Solution

  • Summarizing the answer that came from the comments:

    It seems like you created both files, normally your code needs to go on _x versions, which scss will use to build the file that has the import on it; meaning that those files are not meant to be used as a whole piece but be part of another.

    Try deleting the one without the underscore prefix. Ps: make sure you have a copy.

    Your process might have mixed up some stuff. Get the content from the custom file and put it on _custom. This should be under the src directory. In your build folder you will see both, scss and css, normally just the main, but it depends on your theme. Your main scss is clearly including that piece as it is regularly done, and this is the piece that makes your code available.