Get theming toolchain to work

Plone Support Theming
1

Hello, every 01!

I'm trying to get Plone theming toolchain to work for an upgrade. I'm following steps in the Plone Training Video https://www.youtube.com/watch?v=csxRui3u0UM which is very helpful, but when I issue npm run watch I get an error:

$ npm run watch
  
> akbild.theme@1.0.0 watch
> nodemon --watch styles/ --watch js/src/ --ext scss,js --exec "npm-run-all build-css build-js"
  
[nodemon] 2.0.22
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): styles/**/* js/src/**/*
[nodemon] watching extensions: scss,js
[nodemon] starting `npm-run-all build-css build-js`
  
> akbild.theme@1.0.0 build-css
> npm-run-all css-main css-tinymce
  
  
> akbild.theme@1.0.0 css-main
> npm-run-all css-compile-main css-prefix-main css-minify-main
  
  
> akbild.theme@1.0.0 css-compile-main
> sass --load-path=node_modules --style expanded --source-map --embed-sources --no-error-css styles/theme.scss:styles/theme.css
  
Deprecation Warning: $weight: Passing a number without unit % (0) is deprecated.
  
To preserve current behavior: $weight * 1%

More info: https://sass-lang.com/d/function-units

    ╷
212 │   @return mix(black, $color, $weight);
    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/_functions.scss 212:11      shade-color()
    node_modules/bootstrap/scss/mixins/_buttons.scss 14:59  button-variant()
    node_modules/bootstrap/scss/_buttons.scss 143:7         @import
    bootstrap/scss/bootstrap.scss 22:9                      @import
    @plone/plonetheme-barceloneta-base/scss/base.scss 5:9   @import
    styles/_plone-imports.scss 10:9                         @import
    styles/theme.scss 6:9                                   root stylesheet

Deprecation Warning: $weight: Passing a number without unit % (0) is deprecated.
  
To preserve current behavior: $weight * 1%
  
More info: https://sass-lang.com/d/function-units
  
    ╷
207 │   @return mix(white, $color, $weight);
    │           ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/_functions.scss 207:11       tint-color()
    node_modules/bootstrap/scss/mixins/_buttons.scss 14:114  button-variant()
    node_modules/bootstrap/scss/_buttons.scss 143:7          @import
    bootstrap/scss/bootstrap.scss 22:9                       @import
    @plone/plonetheme-barceloneta-base/scss/base.scss 5:9    @import
    styles/_plone-imports.scss 10:9                          @import
    styles/theme.scss 6:9                                    root stylesheet
  
Deprecation Warning: $weight: Passing a number without unit % (0) is deprecated.
  
To preserve current behavior: $weight * 1%

More info: https://sass-lang.com/d/function-units
  
    ╷
187 │     $list-group-variant-color: mix($value, color-contrast($list-group-variant-bg), abs($list-group-item-color-scale));
    │                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
    node_modules/bootstrap/scss/_list-group.scss 187:32    @import
    bootstrap/scss/bootstrap.scss 35:9                     @import
    @plone/plonetheme-barceloneta-base/scss/base.scss 5:9  @import
    styles/_plone-imports.scss 10:9                        @import
    styles/theme.scss 6:9                                  root stylesheet
  
Error: Can't find stylesheet to import.
   ╷
30 │ @import "@plone/plonetheme-barceloneta-base/scss/event";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  styles/_plone-imports.scss 30:9  @import
  styles/theme.scss 6:9            root stylesheet
ERROR: "css-compile-main" exited with 65.
ERROR: "css-main" exited with 1.
ERROR: "build-css" exited with 1.
[nodemon] app crashed - waiting for file changes before starting...
^C

I was pinning Barceloneta in buildout.cfg but the problem remains.

[versions]
plonetheme.barceloneta = 3.0.0a9

When I do npm list I get:

$ npm list
akbild.theme@1.0.0 /Users/gogo/Documents/Work/git.akbild.ac.at/akbild-webportal/software/akbild.theme/src/akbild/theme/theme
+-- @plone/plonetheme-barceloneta-base@3.0.1
+-- autoprefixer@10.4.14
+-- bootstrap@5.2.3
+-- clean-css-cli@5.6.2
+-- dom-parents@1.1.1
+-- element-closest-polyfill@1.0.6
+-- element-matches-polyfill@1.0.0
+-- focus-trap@6.9.4
+-- focus-visible@5.2.0
+-- nodemon@2.0.22
+-- npm-run-all@4.1.5
+-- postcss-cli@8.3.1
+-- postcss@8.4.22
+-- sass@1.62.0
+-- stylelint-config-twbs-bootstrap@2.2.4
+-- webpack-cli@4.10.0
`-- webpack@5.79.0

Any help would be appreciated.

2

event.scss is missing, misspelled or in the wrong place ?

3

I have no idea, I just know that this theme has been working and was compile-able before. "event.scss" should be part of barceloneta but it can not be found?

4

I wonder what component is looking for that file, where is it expected and how can I put it where it is expected. I pinned the version of barceloneta to the same version that is in use on our live system.

5

Read 2-3 lines before the error.

6

This path is throwing me off, I have no idea how this is resolved:

@plone/plonetheme-barceloneta-base/scss/base.scss

Thank you for your help!

7

Or maybe "before" points to this line, which uses the same syntax:

@import "@plone/plonetheme-barceloneta-base/scss/event";

I do see

$ npm list
akbild.theme@1.0.0 /Users/gogo/Documents/Work/git.akbild.ac.at/akbild-webportal/software/akbild.theme/src/akbild/theme/theme
+-- @plone/plonetheme-barceloneta-base@3.0.1
[...]

But I don't know where this is from, or how I can check files within this.
Sorry I'm really new to Plone Theming in general.

8

Thankfully @agitator pointet out to me that the @plone/... stuff is in the folder node_mudules; however there is no file "event" and I have no Idea if it was there in an older (or newer) Version. I see the source code at https://github.com/plone/plonetheme.barceloneta/tree/3.0.x/scss, but branches https://github.com/plone/plonetheme.barceloneta/tree/2.x/scss and https://github.com/plone/plonetheme.barceloneta/tree/1.6.x/scss give me 404's and I can't see how this is supposed to compile.

9
  • CSS is the 'styling' of a site (colors, fonts etc):
  • For your theme, this is done in SCSS files which compile into CSS.
  • There will be one main file, which 'gets the others'.
  • This is done to keep it simpler to edit (you dont have to look through thousands of lines to find where to define 'Heading 1' etc

In your main file, there is a reference to a file that can not be found.
This probably means that 'things' have moved from one file to another. If you remove the line with ' @import "@plone/plonetheme-barceloneta-base/scss/event"; in your main file, the theme will probably compile, but maybe 'Events' will look different.

So, try remove that line (in theme.scss) and see if it compiles.

PS: It could be that the file has changed name (for example to ' event.plone.scss or plone.event.scss )

10

Now I know why I got the 404's: the directory scss simply didn't exist in older Versions of barceloneta (i.e. https://github.com/plone/plonetheme.barceloneta/tree/2.x). Now I have no idea where the referenced @plone/plonetheme-barceloneta-base/scss/event ever was. Do I have to "build" barceloneta somehow before that file could be where it should be?

11

Edit, you're looking for @plone/plonetheme-barceloneta-base - npm

Barceloneta was using less before Plone 6

12

Turned out package.json had Version definitions for barceloneta, with '^' in the beginning. That's why that file was missing. So we pinned the version of barceloneta for good, then the version of bootstrap and now it compiles again!

1 Like