Level 102
You need to specify each file, not a directory. You can use an entry point scss file that loads all the others instead
Aug 10, 2022
5
Level 3
Vite can't find SCSS files within folder
I just created a new Laravel project and I bought an admin template to use for the frontend.
Since it is a new Laravel project, I want to use Vite instead of Mix. The admin template has a lot of scss files so I added the path to the folder in the 'input' argument.
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel({
input: ['resources/css/app.css',
'resources/sass/pages', //this does not work. Error is thrown.
'resources/sass/pages/app-calendar.scss', //this works. Assets are compiled.
'resources/js/app.js'],
refresh: true,
}),
],
});
So, when I reference to 1 file, the 'npm run build' command runs fine. But there are many files in that folder, so that's why I want the other one to work. I got this error:
Could not resolve entry module (resources/sass/pages/).
error during build:
Error: Could not resolve entry module (resources/sass/pages/).
I tried with and without trailing slash, with wildcards, with regular expressions but nothing seems to work. How can I achieve this?
Level 3
@Sinnbeck That explains a lot... Sometimes it can be that easy :-) Thanks Sinnbeck.
Level 102
@TutanRamon Yeah it can be a bit tricky to understand :) But great that you got it working
Level 3
@Sinnbeck I wrote a small function to read certain folders in order to get an array of files.
const glob = require('glob');
const assetsFileList = [];
function readAssetsDir(dir, array) {
(glob.sync(dir) || []).forEach(f => {
f = f.replace(/[\\/]+/g, '/');
if (f !== null){
array.push(f);
}
});
return array;
}
readAssetsDir('resources/sass/custom/**/!(_)*.scss', assetsFileList);
readAssetsDir('resources/sass/pages/**/!(_)*.scss', assetsFileList);
readAssetsDir('resources/sass/themes/**/!(_)*.scss', assetsFileList);
//etc.
export default defineConfig({
plugins: [
vue(),
laravel({
input: assetsFileList,
refresh: true
}),
],
});
1 like
Level 102
Please or to participate in this conversation.