mix.sass does not allow glob params

[paper9oll]

webpack.mix.js

mix.sass('resources/assets/styles/**/*.scss', 'public/styles')

Let's say I have 2 files:

resources/assets/styles/app.scss
resources/assets/styles/content/content.scss

when I run the npm run dev it compile the scss into css and "copies" them to public directory:

public/styles/app.css
public/styles/content/content.css

[JeffreyWay]

Right - you need to be specific with your Sass entry point.

Generally, you'll have a single app.scss entry, and that file will import any other .scss files/partials it needs.

[paper9oll]

Hi thanks for the reply.

Say i got multiple scss files like 20+ for individual pages, does that means i have to declare mix.sass for every single one of scss files?

[zacksmash]

@paper9oll No, you would have a main.scss file which you would add your @import statements to

main.scss

@import '_file.scss';
@import '_file2.scss';
@import '_file3.scss';
...

Then, in your webpack.mix.js file, you would run mix.sass('path/to/main.scss', 'public/path') or mix.standaloneSass('path/to/main.scss' 'public/path'), which is a tiny bit faster.

[maxfenton]

Is there a way in that main.scss to use globbing like @import 'components/*.scss' ?

--

Update (2018-09-13) : managed this by adding import-glob-loader to package.json and adding this to webpack.mix.js:

mix.webpackConfig({
  module: {
    rules: [
      {
        test: /\.scss/,
        loader: 'import-glob-loader'
      }
    ]
  }
});

[jethromayuk]

It would be great if we could do this.