Hello! I’ve been digging into sage for some time but it’s hard for me to move ahead. All information I’ve found in the internet gives general guidelines on installing, but then I don’t grasp what to do.
I created my project with composer, installed all dependencies with yarn and then built with yarn build.
I have some experience with Wordpress, created sites and templates, but now after these steps I don’t know how to continue; to modify the front end and the back end. I started reading the book, but it’s written about sage 8 and sage 9 seems to be different.
Please, I’ll appreciate if anyone can send or recommend me links, providing more profound information about development with sage.
Thank you
Hi, sorry you’re having so much difficulty with Sage. How much theme development experience do you have? It’s stated in the docs, I think, that Sage shouldn’t be anyone’s first custom theme. Developing with Sage assumes a lot of prior knowledge of WordPress theme development.
Roughly, to make the changes you’re asking about, you would edit the template files in resources/views, and the Scss files in resources/assets/styles.
There are Sage9 docs on GitHub here, too: https://github.com/roots/docs/
2 Likes
Thank you MWDelaney, I have made themes in Wordpress and built sites as well, but my experience consists in writing pure php, html and css. When it comes to Laravel Blades and SASS, well, I’m taking my first steps now. Besides, there are questions I still can’t answer by myself, like do I have to manually install Webpack and other features or tey are installed along with the first creation of the the Sage project? Logically I conclude that I only need the requirements listed in https://github.com/roots/sage.
Thank you for your reply.
OK, I installed the theme by
composer create-project roots/sage your-theme-name dev-master
then checked /my-theme/resources/assets/confit.json file and everything seems fine.
Run yarn run start and editted the scss files in /resources/assets/styles folder.
After I save the file I get the message: Compiled successfully in .... ms. When I check in the browser, I see there is no effect. The changes I made in the stylesheets don’t appear in the browser.
I made some changes in the templates and in the partials, though. Everything works fine.
Does anybody know which styles override the changes i make in /assets/styles?
Thanks
Ah, if you’re using yarn start the assets are basically compiled in memory and then injected into the browsersync session running at http://localhost:3000.
yarn start will continually recompile and re-inject styles and scripts into that session as you edit files which is great if you’re working and need to see changes right away and fiddle with them.
To compile styles and scripts and output them to your dist directory (and view them without the browsersync session) run yarn build. This will create your dist directory and populate it with your compiled assets.
When you’re ready to deploy, run yarn build:production to compress and version your assets. If you’re using Trellis you can set up a build_before hook to take care of this step for you.
Does that help?
2 Likes
Yes, when I run yarn build:production everything looks the way I want it to. Thank you!
Ack! My above (now edited) post somehow picked up a “G” at the beginning turning “Ah” into “GAh” which sounds exhasperated. I am not now, and was not when I wrote that, in any way exhasperated. These are good questions and I’m happy to answer them!
1 Like
Thank you very much. I am getting more impressed by Sage as I dive deeper. I am sure new questions will turn up as I work with it.