@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.