@import "@concretecms/bedrock/assets/bedrock/scss/frontend"; Error

Developing with Concrete
1

Hi there,

I’m currently working through the developer documentation to build a theme for version 9. (Still learning, never used npm and laravel mix much)
I’m stuck at the chapter “Enabling customization in themes” → " Move SASS Into the Theme Directory" (here)

After I moved and updated the files, when I run “npm run production” I get an error:

SassError: Can’t find stylesheet to import.
2 │ @import “@concretecms/bedrock/assets/bedrock/scss/frontend”;

I double-checked multiple times If I made a mistake somewhere but couldn’t find one.

I don’t understand what the problem exactly is. Up until this point everything was working fine.
I do understand that there is a problem with the @import “@concretecms/bedrock/assets/bedrock/scss/frontend”; but I don’t know what exactly and how to solve it.

Any help would be much appreciated. :slightly_smiling_face:

2

Did you install bedrock by running npm i @concretecms/bedrock ?

When I’ve used bedrock this is my import @import "~concretecms-bedrock/assets/bedrock/scss/frontend";

3

yes, I did.
Everything worked fine (‘npm run production’ and ‘npm run watch’) while working through the documentation/tutorial.
Until I got to the section linked above.

I would like to understand the error message.
Perhaps the problem is, that I don’t understand what @import “@concretecms/bedrock/assets/bedrock/scss/frontend”; exactly does.

I think do understand what a @import of a scss file does. Much like a php include, it simply includes the scss file from the path specified, correct?
But what does @import “@concretecms/…” exactly do?

4

after some reading up on sass and looking through the filesystem, I assume the

@import “@concretecms/bedrock/assets/bedrock/scss/frontend”;

looks into the folder “node_modules” for the _frontent.scss specified in the path.

Since the documentation instructs to move the sass files into the theme directory it points to a folder no longer existing.
So I tried copying the node_modules/@concrete folder into the theme directory and run “npm run production” again. That apparently did the trick. No error messages.

While that’s great news, I suspect that’s not really a solution for the problem rather than some sort of hack. I fear I’ll run into more problems later on with this.
Is there an error in the documentation? Or is there something wrong on my part?

5

Did you try @import "~concretecms-bedrock/assets/bedrock/scss/frontend"; instead of @import “@concretecms/bedrock/assets/bedrock/scss/frontend”;?

6

Yes, checked multiple times for extra “~” symbols. Unfortunately that wasn’t the cause.

I did some further testing and changing:

@import “@concretecms/bedrock/assets/bedrock/scss/frontend”;

to

…/…/theme_bedrock_documentation/node_modules/@concretecms/bedrock/assets/bedrock/scss/frontend"

works as well.
That makes sense to me, providing the cause of the problem is that it was pointing to a folder no longer existing.

It’s not optimal but it prevents me from having the entire “node_modules”-folder inside the theme directory.
So, it somewhat solved the problem but unfortunately doesn’t explain the cause of said problem.

7

I’m having exactly the same problem.

My ConcreteCMS details are:

Concrete Version

Core Version - 9.1.3
Version Installed - 9.1.3
Database Version - 20220908074900

NPM is version 9.5.0 and node.js is version 19.3.0.

I dont know if I’ve missed something or not copied something across to the theme directory correctly. According to the documentation you only need to copy the contents of the directory assets/scss into the theme directory.

I left all the following in my build directory:
node_modules,
webpack.mix.js,
package.json
package-lock.json files

and all I get are the following errors now:

SassError: Can't find stylesheet to import. 3 @import "@concretecms/bedrock/assets/bedrock/scss/frontend"; ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

What do I need to do to get this to work as I’m really getting frustrated now as I’ve retried each step far too many times?

8

Here’s what I did to fix this:

In your _common.scss file change:

@import “@concretecms/bedrock/assets/bedrock/scss/frontend”;

to

@import “YourThemeDevelopmentDirectory/node_modules/@concretecms/bedrock/assets/bedrock/scss/frontend”;

‘YourThemeDevelopmentDirectory’ being the path to the directory you setup in the chapter ‘Setup Development Environment’.

In my case it looks like this:

@import “…/…/…/…/…/…/…/…/…/theme_bedrock_themedev/node_modules/@concretecms/bedrock/assets/bedrock/scss/frontend”;

Hope this helps.

1 Like
9

Thank you for this. Its helped a lot as everything now works with the npm run production and watch commands.

1 Like