Level 102
I honestly dont know if it can handle both types at the same time. But perhaps try naming them different, as the output would be the same file name (both would compile to app.css). So maybe name it app2.scss
1 like
Oct 25, 2022
5
Level 3
SCSS not compiling
In my vite.config.js I have
import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';
import basicSsl from '@vitejs/plugin-basic-ssl';
export default defineConfig({
server: {// https://stackoverflow.com/a/73113078/4360876
host: '192.168.56.101',
https: true
},
plugins: [
basicSsl(),
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
'resources/sass/app.scss',
],
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
],
}),
],
});
Then I have files:
/resources/css/app.css
/resources/sass/app.scss
In my blade layout file I have:
@vite(['resources/scss/app.scss', 'resources/css/app.css', 'resources/js/app.js'])
My dev server's IP address (which is hosting vite) is 192.168.56.101 (a VM), but I can hit https://192.168.56.101:5173/resources/css/app.css (200 success) but not https://192.168.56.101:5173/resources/scss/app.scss (404 not found).
Does anybody know what might be going on? am I correct in assuming that in my @vite() include I should be including the path to /scss/app.scss AND /css/app.css if I want to use SCSS and CSS?
Level 3
@Sinnbeck oh I didn't realise that it would compile to .css but that makes sense!
I have tried renaming it but no dice, although in that case I think I just have the file extension incorrect since the path is different, so technically I think I just need to hit https://192.168.56.101:5173/resources/scss/app.css (.css instead of .scss).
Level 102
@daveb2 For vite to pick up that its an scss file it needs the scss extention. What are your current paths/filenames after renaming ?
Level 3
@Sinnbeck Files on disk I have /resources/css/app.css and /resources/sass/app-sass.scss, and in the @vite() include I have @vite(['resources/scss/app-scss.scss', 'resources/css/app.css', 'resources/js/app.js'])
But it's not finding it at all, scss or not - I get a hit on https://192.168.56.101:5173/resources/css/app.css but 404s on https://192.168.56.101:5173/resources/scss/app.css,
https://192.168.56.101:5173/resources/scss/app-sass.css,
https://192.168.56.101:5173/resources/scss/app-sass.scss
Level 3
Ah, thank you, seem to have had some success.
The winning combination seems to be:
filename /resources/sass/app.scss, @ vite() include @vite(['resources/sass/app.scss', 'resources/css/app.css', 'resources/js/app.js'])
The next issue I ran into was that it would load fine in a browser tab, but I got an error 500 when trying to parse it as CSS, and vite was reporting this error:
[vite] Internal server error: [postcss] /home/www/<mysite>/html/resources/sass/app.scss?direct:19157:1: `@layer utilities` is used but no matching `@tailwind utilities` directive is present.
So then I removed my @tailwind includes from my css file and put those in my sass file:
// tailwind
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
...and now it's working. Also, Font Awesome includes it seems only work as CSS, not with the SASS version. But I can now make changes to the app.css file and see them reflected in the browser within a couple of seconds, without refreshing (which is kind-of cool, and I suppose part of the design ethos for vite).
So this is one of those "it works, but I'm not quite sure why" situations I think. Thanks for your help @sinnbeck
Please or to participate in this conversation.