search

oroinc / orocommerce

Main OroCommerce package with core functionality.
http:///www.orocommerce.com/
Other
193 stars 83 forks source link

Error during assets build: Undefined variable: "$base-font-size" #140

Closed yaroslavbr closed 3 years ago

yaroslavbr commented 3 years ago

Summary
After commerce update to 4.2 version and trying to rebuild assets with oro:assets:install command I getting strange error over and over. I already tried different approaches, different composer versions, etc, symfony-flex installed, fxp-plugin - not for composer 2 (because is not supported). Maybe you can suggests something?

Steps to reproduce

Actual Result Getting error: ` Child default theme: Time: 40739ms PublicPath: /build/default/ 2 assets

ERROR in ./build/default/css/stylebook.css.scss
Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ../node_modules/sass-loader/lib/loader.js):

$base-ui-element-font-size: $base-font-size;
                           ^
      Undefined variable: "$base-font-size".
      in /app/public/bundles/oroform/default/scss/settings/_variables.scss (line 4, column 29)
    at /app/node_modules/webpack/lib/NormalModule.js:316:20
    at /app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at Object.callback (/app/node_modules/sass-loader/lib/loader.js:52:13)
    at Object.done [as callback] (/app/node_modules/neo-async/async.js:8069:18)
    at options.error (/app/node_modules/node-sass/lib/index.js:294:32)
 @ ./build/default/css/stylebook.scss.js 1:0-30`

Expected Result

Details about your environment

ValeriyYustunyk commented 3 years ago

Try to add missed setting to stylebook styles into assets.yml like 

stylebook_styles:
    inputs:
        - 'bundles/orocustomtheme/FrontendBundle/scss/settings/main/global-settings.scss'
    output: 'css/stylebook.css'

You might find such an example in custom theme.

yaroslavbr commented 3 years ago

@ValeriyYustunyk the problem is that these variables are oro internal variables, and as I can see there is already such instruction for global-settings.scss which should include it. I also tried to add such block in my custom assets.yml but getting same error again and again.

ValeriyYustunyk commented 3 years ago

Looks like is customization was removed $base-font-size variable. Did you try to bind styles without your customization? I mean hide (comment, revert) all your own styles in assets.yml.

yaroslavbr commented 3 years ago

I tried to revert everything as possible. Regarding the variable - $base-font-size - it is defined in oro code, and there are no customizations regarding it. For now I find out one interesting thing, seems the problem is in the includes order: @import "./../../../bundles/oroform/default/scss/settings/global-settings"; @import "./../../../bundles/orofrontend/default/scss/settings/global-settings"; @import "./../../../bundles/orofrontend/default/scss/settings/bootstrap/variables"; @import "./../../../bundles/orofrontend/default/scss/settings/global-settings"; @import "./../../../bundles/orocustomer/default/scss/settings/global-settings"; @import "./../../../bundles/oroform/blank/scss/settings/mixins/appearance"; @import "./../../../bundles/madiafrontend/crh_theme/scss/settings/main/global-settings"; @import "./../../../bundles/madiafrontend/crh_theme/scss/settings/_mixins"; @import "./../../../bundles/madiafrontend/crh_theme/scss/settings/main/global-settings"; @import "./../../../bundles/madiatheme/scss/settings/partials/_sizes"; @import "./../../../bundles/madiatheme/scss/settings/main/_fluid"; @import "./../../../bundles/madiaui/crh_theme/scss/settings/global-settings"; @import "./../../../bundles/madiafrontend/crh_theme/scss/settings/main/global-settings"; @import "./../../../bundles/madiafrontend/crh_theme/scss/settings/_mixins"; @import "./../../../bundles/madiafrontend/crh_theme/scss/settings/main/global-settings"; @import "./../../../bundles/madiatheme/scss/settings/partials/_sizes"; @import "./../../../bundles/orocustomtheme/FrontendBundle/scss/settings/main/global-settings"; @import "./../../../bundles/oroform/default/scss/settings/global-settings"; @import "./../../../bundles/oroui/blank/scss/settings/global-settings";

Seems variable defined in file which is included later

ValeriyYustunyk commented 3 years ago

One import is missed above of @import "./../../../bundles/oroform/default/scss/settings/global-settings" should be included @import "./../../../bundles/oroui/blank/scss/settings/global-settings".

yaroslavbr commented 3 years ago

yes, it is included in the end of the list that I send, somehow. So researching why it is that and how can I handle it, maybe play with bundle priorities

yaroslavbr commented 3 years ago

Seems the problem is not in priorities. Installed new oro application and compared styles.css.scss file content. As I can see in my application blank theme assets are not installed. @ValeriyYustunyk maybe you know what can be the reason of such strange behaviour?

yaroslavbr commented 3 years ago

when I try to build just blank theme it is build correct, but when I build default it fails because there are no blank theme variables defined

ValeriyYustunyk commented 3 years ago

Firstly you have to compare the contents of the stylebook.css.scss file with the original one. If some files from the blank theme are absent it might mean that the custom theme did not extend from the blank theme or some files were removed. https://doc.oroinc.com/frontend/storefront/theming/#dev-doc-frontend-layouts-theming-definition.

yaroslavbr commented 3 years ago

As I already told I compared - the problem is that blank theme assets are not present in this file.

Now I entirelly removed our custome them definition as well as all assets.yml file from our code. Running build command gives same error:

`Child blank theme: Time: 36381ms PublicPath: /build/blank/ Asset Size Chunks Chunk Names app.js 5.46 MiB app [emitted] app chunk/commons.js?version=52af1989 3.92 MiB commons [emitted] commons chunk/orocheckout.js?version=52af1989 382 KiB orocheckout [emitted] orocheckout chunk/orodatagrid.js?version=52af1989 2.03 MiB orodatagrid [emitted] orodatagrid chunk/orofilter.js?version=52af1989 492 KiB orofilter [emitted] orofilter chunk/oroform-validate.js?version=52af1989 188 KiB oroform-validate [emitted] oroform-validate chunk/oropayment.js?version=52af1989 140 KiB oropayment [emitted] oropayment chunk/oroproduct.js?version=52af1989 599 KiB oroproduct [emitted] oroproduct chunk/oroshoppinglist.js?version=52af1989 423 KiB oroshoppinglist [emitted] oroshoppinglist chunk/orostylebook.js?version=52af1989 185 KiB orostylebook [emitted] orostylebook chunk/oroui.js?version=52af1989 522 KiB oroui [emitted] oroui chunk/orouser.js?version=52af1989 346 KiB orouser [emitted] orouser chunk/oroviewswitcher.js?version=52af1989 132 KiB oroviewswitcher [emitted] oroviewswitcher chunk/orowebsiteelasticsearch.js?version=52af1989 238 KiB orowebsiteelasticsearch [emitted] orowebsiteelasticsearch chunk/polyfills.js?version=52af1989 90.6 KiB polyfills [emitted] polyfills chunk/vendors~commons.js?version=52af1989 563 KiB vendors~commons [emitted] vendors~commons chunk/vendors~orodatagrid-scroll-plugin.js?version=52af1989 903 KiB vendors~orodatagrid-scroll-plugin [emitted] vendors~orodatagrid-scroll-plugin chunk/vendors~orodatagrid.js?version=52af1989 155 KiB vendors~orodatagrid [emitted] vendors~orodatagrid chunk/vendors~oroform-validate.js?version=52af1989 878 KiB vendors~oroform-validate [emitted] vendors~oroform-validate chunk/vendors~oroproduct.js?version=52af1989 170 KiB vendors~oroproduct [emitted] vendors~oroproduct chunk/vendors~oroshoppinglistquicksearch.js?version=52af1989 81.2 KiB vendors~oroshoppinglistquicksearch [emitted] vendors~oroshoppinglistquicksearch css/stylebook.css 344 KiB css/stylebook [emitted] css/stylebook css/styles.css 1.97 MiB css/styles [emitted] css/styles stylebook-highlighter.js 165 KiB stylebook-highlighter [emitted] stylebook-highlighter

In OroAssetsBuildCommand.php line 257:

Build failed.

`

yaroslavbr commented 3 years ago

The problem was in theme.yml from separate package. The was definition for default theme but without "parent" key in it. Something like this - https://github.com/oroinc/platform/blob/master/src/Oro/Bundle/FormBundle/Resources/views/layouts/default/theme.yml

Somehow I don't know why (because all worked before) this configuration was taken directly (without merging all theme configuration) and this caused webpack can not determine parent theme so it loaded just assets from default theme (but not blank). Removing theme.yml definition helped.

@Grygir many thanks for helping to debug this problem!