After running npm start it was deleting dist folder

Hi
I’m using wordpress sage theme. It is my first time working with sage theme. I setup my wp site in local in windows system. When i run npm start it is deleting my dist folder and show the errors as show n in the picture. Please help me I’m not understand where i’m doing wrong.

This is the intended behavior. See the documentation:

Your problem with $spacer seems to be related to Bootstrap. Please have a look at some of the other posts in this forum that deal with this exact issue: https://discourse.roots.io/search?q=undefined%20variable%20spacer

1 Like

I installed bootstrap version 4 and imported it in dist/styles/main.css but still i getting same error when i run npm start

Don’t edit files in the dist folder, those are generated every time you run yarn build.

Bootstrap 4 can be added for you if you install the theme via composer.
composer create-project roots/sage your-theme-name

See the github repo and the sage docs for more instructions.

1 Like

I went through the document i import bootsrap file in resources/assets/styles/main.scss folder but still getting same problem " Undefined variable: “$spacer”"

Which version of Sage are you using? Is it a recent version or an old one?

If it’s a recent one, Sage 9, then importing Bootstrap in main.scss is not the supported or example method of using Bootstrap with Sage. Check out the default Sage configuration which uses Bootstrap. You’ll see that Bootstrap is included in the autoload directory.

Following this example does work and is the recommended practice for using Bootstrap with Sage 9.

I’m using sage 9. I applied the changes but it did not work.

What changes did you apply, and how did you apply them? Can you detail the changes you made?

thanks for the help , it is working now small issue with the file path during the import…, your reference was very helpful in identifying the cause.

This topic was automatically closed after 42 days. New replies are no longer allowed.