Handle multiple scss file in vite

I am working on Laravel 9 with vite well this is my first vite project so i am a little bit confused, about how can I insert multiple scss files from multiple folders in vite config and extract them as a single entity with respect to the folder name.

For example:-

Below is my folder structure of scss

https://pastebin.com/q6UvG4kA

Now, I have called all the files in vite config but now i want them to render as main.scss and plugin.scss respectively

Hope i am clear?

MohamedTammam

3 years ago

Best Answer

Level 51

First create your main.scss and plugins.scss then add them to your vite config file

resources/scss/main/main.scss

@import "./a"
@import "./b"
// ...

resources/scss/main/plugins.scss

@import "./p1"
@import "./p2"
// ...

laravel([
    'resources/scss/main/main.scss', 
    'resources/scss/plugins/plugins.scss', 
]),

1 like

Owaiz_Yusufi

3 years ago

Level 1

Thanks for your response MohamedTamman

I appreciate your help but, I would like to know if that is possible with vite without importing the files in another CSS file.

Please let me know

Sinnbeck

3 years ago

Level 102

@Owaiz_Yusufi as far as I know that isn't possible with vite. Either use mix instead or write a plugin for vite that adds this feature.

I do it the same way as @mohamedtammam suggests

1 like

MohamedTammam

3 years ago

Level 51

@Owaiz_Yusufi I don't want to say it's not possible, But I don't find something like that before.

1 like

Please or to participate in this conversation.