Laravel-mix: Use mix.sass() in a loop.

[Humeira]

• Laravel Mix Version: [email protected]
• Node Version : v6.5.0

• NPM Version : 3.10.3

• OS: Ubuntu 17.10

I am currently setting up Laravel-mix in a project in a non-Laravel project.

I have different modules in the project with specific styles, sass + css libraries. For keeping my webpack.config to minimum lines, I have defined all my path in a yaml file. And loop into it and compile each one

let stylesFiles = yaml.safeLoad(fs.readFileSync('config/cssFiles.yml'));
let regexSass = /.+\.s[ac]ss$/i;
let regexCss = /.+\.css$/i;
let stylesFilesKeys = Object.keys(stylesFiles);
let styleList = []
stylesFilesKeys.forEach(function(key, index) {
  styleList.push(stylesFiles[key]);
});

for (var key in stylesFiles) {
  var cssList = [];
  stylesFiles[key].forEach(function(item) {
    if (regexCss.test(item)) {
      cssList.push(item);
    }
    if (regexSass.test(item)) {
      mix.sass(item, './dist/item' + '.css');
    }
  });


  mix.styles(cssList, './dist/' + key);
}

While I can use mix.styles() in the loop, I cannot use mix.sass()
I keep on getting this error

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry should be one of these:
   object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
   -> The entry point(s) of the compilation.
   Details:
    * configuration.entry['mix'] should be a string.
      -> The string is resolved to a module which is loaded upon startup.
    * configuration.entry['mix'] should not contain the item 'src/Resources/sass/components/board.sass' twice
    * configuration.entry should be a string.
      -> An entry point without name. The string is resolved to a module which is loaded upon startup.
    * configuration.entry should be an array:
      [non-empty string]
    * configuration.entry should be an instance of function
      -> A Function returning an entry object, an entry string, an entry array or a promise to these things.

Any idea if this is possible?

[artemsky]

thats how i solved this

const glob = require('glob');
const mix = require('laravel-mix');

const files = pattern => glob.sync(pattern, { cwd: 'resources/assets' });

const globify = (pattern, out, mixFunctionName) => {
  files(pattern).forEach((path) => {
    mix[mixFunctionName](`resources/assets/${path}`, out);
  })
};

globify('sass/client/pages/*.scss', 'assets/pages', 'sass');

[renanBritz]

Great solution @artemsky !

Unfortunately, npm watch does not detect changes when I create a new directory with scripts or stylesheets in it. Is there a way to fix that?

I'm trying a modular approach with nWidart/laravel-modules, and I'd like to bundle the modules' resources. I wouldn't like to assume which and how many modules my system have, that's why I'm trying it like this.

Regards!