How to use Webpack as a way to compile Sass -> Css?
This is probably a stupid question, but I have been trying this for the past 2 hours and can't figure it out. I just need a way to compile my regular .scss files (in every directory) into 1 .css file. I'm aware I can just use
sass --watch, but I'd like to have some other features webpack leverages (like minifying, and again I know sass ootb can do this).
We use Laravel Mix, which is just a library on top of Webpack that can do this using mix.sass('entry.scss', 'output.scss'), but I can't get it to work on default Webpack. The reason why I want to go from Mix -> Webpack is because I need to watch all files in my project and output it as 1 css file and Mix can't do this6 Replies
Switch to Vite and be happy
Laravel made the move awhile ago
>.>;;
Configuring Webpack is a dark art and I say GL sir
Wouldn't you want PostCSS to do all that too not Sass?
Thats how I do it anyway but cause I use other plugins too 🤔
GitHub
vite-plugin/UPGRADE.md at main · laravel/vite-plugin
Laravel plugin for Vite. Contribute to laravel/vite-plugin development by creating an account on GitHub.
I'm a total noob at this so I'll have to look at this after work. I was thinking Vite too but I was getting confused because Vite also has it's own built-in dev server which I don't want -- we use ddev which is a way to develop php docker projects locally so I was getting confused if it would conflict with that or not
If I can just use it as a build tool that'll be great and I'll look into it
And side note b1 you led me down a dark, dark rabbit hole 🤣 this component library will come out way stronger at the end though 😤
Yea I hate tooling so feels
sorry? not sorry 🙂
You can try Parcel as an alternative. With Parcel, you can link the SASS file to your HTML using the
link tag like how you would link your CSS.Not an option for Laravel
Also vite is the same it's ready to go with sass. It can actually be configured (parcel 0 config is pita).