SassError: Can't find stylesheet to import

I installed Volto Light Theme and get following error after restarting the frontend.

Error: Module build failed (from ../../../node_modules/.pnpm/sass-loader@10.5.2_sass@1.85.0_webpack@5.90.1_esbuild@0.25.0_/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
2 │ @import 'addonsThemeCustomizationsVariables';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  ../../../node_modules/.pnpm/@kitconcept+volto-light-theme@5.0.2_@eeacms+volto-accordion-block@11.0.4_@kitconcept+volto-bu_cfeahmhmjzxuurpxudjgxrpmie/node_modules/@kitconcept/volto-light-theme/src/theme/main.scss 2:9  root stylesheet

I followed the official docs to install it. This error appeared before i started any customization.

Whereas the training says to install the following.

pnpm install @kitconcept/volto-light-theme@6.0.0-alpha.2

You've linked to both a training and the add-on's docs, so I wonder if you crossed the streams.

https://c.tenor.com/2YAgdU9Ifo8AAAAC/dont-cross-the-streams-ghostbusters.gif

1 Like

Yes and no, i started with the training docs but decided to continue with the official documentation. Because the official documentation does not install the alpha version i used pnpm install with the latest release instead. I wondered why the official documentation does not use pnpm install.

I did all other steps as describe in the official docs. Which documentation is recommended to use? Alpha version or release version. The official docs recommend to declare the theme in package.json of the project package folder, the training docs focus on declare it in volto.config.js.

I'm a bit confused. Below are my updates to package.json.

{
  "theme": "@kitconcept/volto-light-theme",
  "dependencies": {
    "@eeacms/volto-accordion-block": "^11.0.4",
    "@kitconcept/volto-button-block": "^3.0.3",
    "@kitconcept/volto-dsgvo-banner": "^2.3.2",
    "@kitconcept/volto-heading-block": "^2.4.0",
    "@kitconcept/volto-highlight-block": "^4.0.0",
    "@kitconcept/volto-introduction-block": "^1.0.0",
    "@kitconcept/volto-light-theme": "^5.0.2",
    "@kitconcept/volto-separator-block": "^4.1.2",
    "@kitconcept/volto-slider-block": "^6.3.1"
  },
  "addons": [
    "@eeacms/volto-accordion-block",
    "@kitconcept/volto-button-block",
    "@kitconcept/volto-dsgvo-banner",
    "@kitconcept/volto-heading-block",
    "@kitconcept/volto-introduction-block",
    "@kitconcept/volto-highlight-block",
    "@kitconcept/volto-separator-block",
    "@kitconcept/volto-slider-block",
    "@kitconcept/volto-light-theme"
  ]
}

And pnpm list ....

Legend: production dependency, optional only, dev only

volto-myproject@1.0.0-alpha.0 /srv/home/hss/plone6/myproject/frontend/packages/volto-myproject

dependencies:
@eeacms/volto-accordion-block 11.0.4        @kitconcept/volto-heading-block 2.4.0       @kitconcept/volto-light-theme 5.0.2         react 19.0.0                                
@kitconcept/volto-button-block 3.0.3        @kitconcept/volto-highlight-block 4.0.0     @kitconcept/volto-separator-block 4.1.2     react-dom 19.0.0                            
@kitconcept/volto-dsgvo-banner 2.3.2        @kitconcept/volto-introduction-block 1.0.0  @kitconcept/volto-slider-block 6.3.1        

devDependencies:
@plone/scripts 3.8.2
release-it 17.1.1

If you want to follow the training, then use only its instructions.

If you only want to install VLT, then follow its instructions.

Do not jump from one to the other, and expect it will work.

If one set of instructions does not work for you, then create an issue in its issue tracker. It helps the author or developer realize that they may have skipped a step that is obvious to them but not to a first-timer.

@claus if you use the package.json approach, you need to add your project addon also in the addons list:

You find you project addon here /frontend/packages/volto-my-demo-project, where volto-my-demo-project is your project addon.

 "addons": [
    "@eeacms/volto-accordion-block",
    "@kitconcept/volto-button-block",
    "@kitconcept/volto-dsgvo-banner",
    "@kitconcept/volto-heading-block",
    "@kitconcept/volto-introduction-block",
    "@kitconcept/volto-highlight-block",
    "@kitconcept/volto-separator-block",
    "@kitconcept/volto-slider-block",
    "@kitconcept/volto-light-theme",
    "volto-my-demo-project"                    <-- but your addon here 
  ]

Its in the docs for Volto Light Theme, maybe not so clear as it should be:

Thanks for this hint, more or less it should be clear but i didn't recognize to put my project package there. I added it, removed all packages, re-added them again but i still get the same issue. I will follow the recommendation to open an issue in Git.

ok, then there is something not working, but putting @kitconcept/volto-light-theme in volto.config.js should definitly work, running a project here on my own with VLT at the moment.

const theme = '@kitconcept/volto-light-theme';

module.exports = {
  addons,
  theme
};

Maybe i have to start the frontend in a different way. I used make frontend-start at my project root directory.

One reason why i added the theme to package.json was a white empty screen with adding it to volto.config.js. If i add it there, do i have to add the addons as well?

const addons = ['volto-myproject'];

I did a quick test and for me its working with

volto.config.js

const addons = ['volto-demo-plone'];
const theme = '@kitconcept/volto-light-theme';

module.exports = {
  addons,
  theme
};

and
package.json

...

  "dependencies": {
    "@eeacms/volto-accordion-block": "^10.4.6",
    "@kitconcept/volto-button-block": "^3.0.2",
    "@kitconcept/volto-dsgvo-banner": "^2.3.2",
    "@kitconcept/volto-heading-block": "^2.4.0",
    "@kitconcept/volto-highlight-block": "^4.0.0",
    "@kitconcept/volto-introduction-block": "^1.0.0",
    "@kitconcept/volto-separator-block": "^4.1.2",
    "@kitconcept/volto-slider-block": "^6.3.1",
    "@kitconcept/volto-light-theme": "^5.0.1"
  },

  "addons": [
  "@eeacms/volto-accordion-block",
  "@kitconcept/volto-button-block",
  "@kitconcept/volto-dsgvo-banner",
  "@kitconcept/volto-heading-block",
  "@kitconcept/volto-introduction-block",
  "@kitconcept/volto-highlight-block",
  "@kitconcept/volto-separator-block",
  "@kitconcept/volto-slider-block",
  "@kitconcept/volto-light-theme"
],

...
1 Like

weird, i did the same and it does not work.

Just to be sure i modified the files in the correct location

frontend/packages/volto-myproject/package.json
frontend/volto.config.js

Yes, those are the right locations. Maybe doublecheck, because when i started with plone i choose the wrong package.json in /frontend and not in /frontend/packages/my-package

Another question: Which Plone and Volto Version are you using ?
I used 6.0 and 6.1 both with Volto 18, with a fresh install.

I use Plone 6.0.14 and Volto 18.8.1.

Ok , same for me.
Last Question, don't get me wrong, this is not meant to sound arrogant or derogatory, did you also save the files and then run make install again? Just so I know that you have the same state as me. Then make backend/ make frontend start ?

Otherwise I don't know what to do at the moment, because it has worked for me with several installs.

Every hint is very welcome. But yes, i already did following steps yesterday ...

rm -rf frontend/node_modules/.pnpm
cd frontend
make install
make start

No difference, but i can get rid of this issue with removing the respective lines from main.scss.

find frontend -name main.scss
./node_modules/.pnpm/react-toastify@5.5.0_react-dom@18.2.0_react@18.2.0__react@18.2.0/node_modules/react-toastify/scss/main.scss
./node_modules/.pnpm/@kitconcept+volto-light-theme@5.0.1_@eeacms+volto-accordion-block@10.4.6_@kitconcept+volto-bu_gvgvckxwpyjdsk3vef2hkoxydi/node_modules/@kitconcept/volto-light-theme/src/theme/main.scss
vi ./node_modules/.pnpm/@kitconcept+volto-light-theme@5.0.1_@eeacms+volto-accordion-block@10.4.6_@kitconcept+volto-bu_gvgvckxwpyjdsk3vef2hkoxydi/node_modules/@kitconcept/volto-light-theme/src/theme/main.scss

Remove 2 lines containing

@import 'addonsThemeCustomizationsVariables';

Do you also have this imports in this files?

grep "@import 'addonsThemeCustomizationsVariables'" frontend/ -r

Just to be sure i use node / tool versions which are expected to work ...

node = 20.18.3
pnpm = 9.1.1

I also did a complete new project without any changes, just added VLT. I just see two options. Maybe i do something wrong adding VLT or i use versions which are not compatible.

@claus

So first, addonsThemeCustomizationsVariables is used by Volto to load CSS Variables from Addons. Normaly this should just stay where it is.

My Node Version is also 20 and pnpm also at 9.1.1

As a reminder you can setup Node very quick to let Node choose the Packetmanager for you, so Node will see that Plone/Volto uses pnpm and pick it automatically. It will ask to install pnpm during make install when you do it the first time. (See Docs Node installation: Node Setup)

Back to the problem. I installed a fresh Plone 6.1 Installation and add VLT and it worked, so i want to share my process below with you. Its a bit of text and if you have Plone already installed as below just read through it.

Fresh Install Setup for Plone 6.1

Instruction based of Install Plone with Cookieplone — Plone Documentation v6

Prerequisites

Setup the Prerequisites as stated in the docs Install Plone with Cookieplone — Plone Documentation v6. (The link highlights the section so you know which part i mean)

Install Plone with cookieplone

  1. Run the commmand in the directory you want the plone directory created:
    pipx run cookieplone

You will be presented with a series of prompts. You can accept the default values in square brackets ([default-option]) by hitting the Enter key, or enter your preferred values. For us now just fill in the Project Title. I used "Demo Plone" here so my project folder will be "demo-plone" and my frontend package is called "volto-demo-plone" so you have better understanding of the screenshots.

  1. Navigate into the new Folder (For me: cd demo-plone)
  2. Run the command make install

Start Backend and Frontend for quick check

Run the following commands, each command in is own shell session:

Shell 1 for Backend: make backend-start
Shell 2 for Frontend: ```make frontend-start``it

Screenshot 1:

You should have a running default Plone 6.1 Instance with Volto 18

You can access it at http://localhost:3000

Install Volto Light Theme (VLT)

  1. Add the Dependencies to the package.json in frontend/packages/volto-demo-plone

package.json:

...
"dependencies": {
    "@eeacms/volto-accordion-block": "^10.4.6",
    "@kitconcept/volto-button-block": "^3.0.2",
    "@kitconcept/volto-dsgvo-banner": "^2.3.2",
    "@kitconcept/volto-heading-block": "^2.4.0",
    "@kitconcept/volto-highlight-block": "^4.0.0",
    "@kitconcept/volto-introduction-block": "^1.0.0",
    "@kitconcept/volto-separator-block": "^4.1.2",
    "@kitconcept/volto-slider-block": "^6.3.1",
    "@kitconcept/volto-light-theme": "^5.0.1"
  },
...
  1. Add the Addons to the package.json in frontend/packages/volto-demo-plone (So we can use them in Volto otherwise we wouldnt the the Blocks in the Frontend, they would only be a dependency used at a technical layer.)

Warning:
In the Addon list, the order of it has a meaning. Every Addon overwrites the addons before it. Your policy add-on should be the last one, so that it overrides any previous ones. @kitconcept/volto-light-theme should be the second-last, placed immediately before your policy add-on.

package.json:

  "addons": [
  "@eeacms/volto-accordion-block",
  "@kitconcept/volto-button-block",
  "@kitconcept/volto-dsgvo-banner",
  "@kitconcept/volto-heading-block",
  "@kitconcept/volto-introduction-block",
  "@kitconcept/volto-highlight-block",
  "@kitconcept/volto-separator-block",
  "@kitconcept/volto-slider-block",
  "@kitconcept/volto-light-theme",
  "volto-demo-plone"
],
  1. Declare the Volto Light Theme in volto.config.js

volto.config.js:

const addons = ['volto-demo-plone'];
const theme = '@kitconcept/volto-light-theme';

module.exports = {
  addons,
  theme
};

Screenshot 2:

  1. Run make install to get the dependencies ect.
  2. Start the Backend and Frontend with make backend-start and make frontend-start

Now you should have a Plone Instance running at http://localhost:3000 with Volto Light Theme installed.

Screenshot 3:

PS: Sry for the long post and the spelling/grammar errors :grin:

1 Like

Thanks a lot investing the time to describe the full process. I followed it step by step and the good news is, it's working as expected. Back to my already existing project it does still not. I started to identify the difference because i didn't change a lot in the first project.

What i have seen during the compile process is the potential root cause.
I also deleted frontend/node_modules to restart from scratch.

ERROR in ../../../node_modules/.pnpm/@kitconcept+volto-light-theme@5.0.2_@eeacms+volto-accordion-block@10.4.6_@kitconcept+volto-bu_5vxazk5cdvexxmjgebwukrpnuu/node_modules/@kitconcept/volto-light-theme/src/theme/main.scss (../../../node_modules/.pnpm/css-loader@5.2.7_webpack@5.90.1_esbuild@0.25.0_/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[6].use[1]!../../../node_modules/.pnpm/postcss-loader@4.3.0_postcss@8.4.31_webpack@5.90.1_esbuild@0.25.0_/node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[6].use[2]!../../../node_modules/.pnpm/resolve-url-loader@3.1.5/node_modules/resolve-url-loader/index.js??ruleSet[1].rules[6].use[3]!../../../node_modules/.pnpm/sass-loader@10.5.2_sass@1.85.1_webpack@5.90.1_esbuild@0.25.0_/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].use[4]!../../../node_modules/.pnpm/@kitconcept+volto-light-theme@5.0.2_@eeacms+volto-accordion-block@10.4.6_@kitconcept+volto-bu_5vxazk5cdvexxmjgebwukrpnuu/node_modules/@kitconcept/volto-light-theme/src/theme/main.scss)
Module build failed (from ../../../node_modules/.pnpm/sass-loader@10.5.2_sass@1.85.1_webpack@5.90.1_esbuild@0.25.0_/node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
2 │ @import 'addonsThemeCustomizationsVariables';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  ../../../node_modules/.pnpm/@kitconcept+volto-light-theme@5.0.2_@eeacms+volto-accordion-block@10.4.6_@kitconcept+volto-bu_5vxazk5cdvexxmjgebwukrpnuu/node_modules/@kitconcept/volto-light-theme/src/theme/main.scss 2:9  root stylesheet
SassError: SassError: Can't find stylesheet to import.
  ╷
2 │ @import 'addonsThemeCustomizationsVariables';
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵

Finally i have seen if i restart from scratch and mention the theme to be used in volto.config.js i get my already existing project to work. But setting the theme in frontend/packages/volto-myproject/package.json produce this issue.

At least it is working now :slight_smile: