Laravel-mix: Allow for wildcards in .scss

[Olian04]

mix.sass('src/style/*.scss', 'dist/style/');

As it stands, the above code results in:

This dependency was not found:
* C:\.....\src\style\*.scss in multi ./src/index.tsx ./src/style/*.scss
To install it, you can run: npm install --save C:\.....\src\style\*.scss

Example in:

• src/style/main.scss
• src/style/other.scss
• src/style/another.scss

Example out:

• dist/style/main.css
• dist/style/other.css
• dist/style/another.css

[JeffreyWay]

We don't support this at the moment. You should be explicit about each Sass file you want to compile.

Most projects just have a single app.scss entry point.

[Olian04]

@JeffreyWay You misunderstood me, i know laravel-mix doesn't support wildcards right now, this issue was meant as a feature request.

[divdax]

@JeffreyWay I'm in the same situation like @Olian04

Currently i'm working on a project where we have 20 minimalistic onepager templates.
Each template only needs his specific css and not a big merged app.css. This make sense?

We have our templates:

resources/views/templates/template1.scss
resources/views/templates/template2.scss
resources/views/templates/template3.scss
resources/views/templates/template4.scss
...

and have to update our webpack.js when we add a new template.
It's ok but a "wildcard" would be much nicer! 😄

[nshontz]

+1 for wildcards

[jordanade]

+1

[Horttcore]

I wan't wildcards so badly…

[peiris]

Wild cards for the win! Please add this feature.

[Olian04]

@JeffreyWay it looks like this issue might need to be reopened.

[pprotschka]

ohh the timing on this! +1

[paper9oll]

+1 for wildcards

[DeanWard]

@JeffreyWay +1 for this. Same use case as @divdax

[DeanWard]

I've written a workaround for this. The code uses node's built-in modules to find all scss files in my resources/sass/pages fold and adds each one to mix.

var fs = require('fs');
var path = require('path');
var files = fs.readdirSync('./resources/sass/pages');

for (var i=0; i<files.length; i++) {
  if(path.extname(files[i]) == '.scss') {
    mix.sass('resources/sass/pages/' + files[i], 'public/css/pages');
  }
}

You can put this at the end of your mix file and it will compile all .scss files in the folder.

[devsi]

@JeffreyWay +1 for me too. We have different branding files white labelling our product. ...branding/*.scss would've been very useful here, @DeanWard's solution solved the issue temporarily, but would love to be using a wildcard here instead.

[Horttcore]

I use this as a workaround.

$ npm i import-glob-loader

```webpack.mix.js
mix.webpackConfig({
module: {
rules: [
{
test: /.scss/,
enforce: 'pre',
loader: 'import-glob-loader'
}
]
}
})
.sass('src/assets/scss/app.scss', 'dist/css/app.css')

``` app.scss
@import '0-settings/*.scss';
@import '1-tools/*.scss';
@import '2-generic/*.scss';
@import '3-elements/*.scss';
@import '4-objects/*.scss';
@import '5-components/*.scss';
@import '6-utilities/*.scss';

[blackdrago]

+1
This would be especially helpful when using laravel modules. For example, something like this:

mix.sass('modules/*/resources/assets/sass/module.scss', 'assets/css/compiled-module-sass.css');

[galactas-hub]

+1
yes definately need the wildcard option.

[TimCreasman]

+1
A wildcard option would be extremely useful.

[modder2]

There is still no updates on this issue?

[BrandonJull]

+1 - this needs to be addressed. Pretty straightforward functionality being overlooked.