Setting up Sass for development and production #357
Replies: 3 comments
-
I'm not quite sure about the recommended Sass setup. Could it be that this is the appropriate approach for implementing it with Laravel and Vite.js as well? |
Beta Was this translation helpful? Give feedback.
-
I'm not sure either, when I worked with Laravel we didn't use Vite.js but Webpack. I may be overthinking it all. May be useful for the next one, but feel free to delete the thread. |
Beta Was this translation helpful? Give feedback.
-
Just in case it may be useful, I wrote down my settings in my copy of Wordplate: https://gitlab.com/kram08980/wp-starter#css Thanks again! |
Beta Was this translation helpful? Give feedback.
-
Hi! Thanks for the boilerplate, it is great.
I wanted to use it with Sass instead of vanilla CSS. And I'm trying to understand how Vite and the theme should handle it. It's my first project with Vite, so it may seem a bit stupid. Sorry!
Besides installing sass according to Vite's documentation, I assumed I had to rename the
recources/css/app.css
toapp.scss
. I got lost, but finally I sorted it out.To work locally, I changed
functions.php
:wp_enqueue_style('app', 'http://localhost:5173/resources/css/app.css', [], null);
toapp.scss
.And to build the assets I changed
vite.config.js
:Is this the intended way of using Sass? Reading the docs I thought it all hanged from Vite and the theme required no changes. And it seems a bit odd to change it in both the theme
functions.php
file andvite.config.js
.Am I doing something wrong?
A small one: And if this is the intended way, there is a secondary idea about file naming. Some JS packages that import CSS styles like Swiper.js result in the creation of an extra CSS file. Having that in mind, I find it useful to name the files:
styles.css
,scripts.js
andscripts.css
. I may have get used to it because working on my own build process that also uses esbuild, and it outputs both CSS and JS files coming fromwhatever.js
with the same name.Again, I'm not that experienced, so sorry if I'm missing the big picture.
And massive thanks!
Beta Was this translation helpful? Give feedback.
All reactions