Laravel-mix: Imposible compile 2 scss files with a same name but in different location

[FDiskas]

laravel-mix version "0.5.16"

It works with javascript but not with scss. Works if I rename app.scss to something like app2.scss

const { mix } = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix
  .js('resources/assets/js/app.js', 'public/js')
  .js('Modules/Admin/Resources/assets/js/app.js', 'public/modules/admin/js')

  .extract(['jquery', 'vue', 'lodash'])

  .sass('Modules/Admin/Resources/assets/sass/app.scss', 'public/modules/admin/css')
  .sass('resources/assets/sass/app.scss', 'public/css');

[adriaanzon]

Are you using your own webback.config.js or the one in node_modules/laravel-mix/setup? Because it should've been fixed here: be433ff

[FDiskas]

Nothing else was changed.
package.json

{
  "private": true,
  "scripts": {
    "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.2",
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.0",
    "laravel-mix": "^0.5.0",
    "lodash": "^4.16.2",
    "vue": "^2.0.1"
  }
}

[FDiskas]

In node_modules directory I see this function like so:

if (Mix.cssPreprocessor) {
    Mix[Mix.cssPreprocessor].forEach(toCompile => {
        let extractPlugin = new plugins.ExtractTextPlugin(
            Mix.cssOutput(toCompile)
        );

        module.exports.module.rules.push({
            test: new RegExp(toCompile.src.fileWithDir.replace(/\\/g, '\\\\') + '$'),
            loader: extractPlugin.extract({
                fallbackLoader: 'style-loader',
                loader: [
                    'css-loader',
                    'postcss-loader',
                    'resolve-url-loader',
                    (Mix.cssPreprocessor == 'sass') ? 'sass-loader?sourceMap&precision=8' : 'less-loader'
                ]
            })
        });

        module.exports.plugins = (module.exports.plugins || []).concat(extractPlugin);
    });
}

[adriaanzon]

Yeah later it got changed, but it should still work the same.

I can't seem to reproduce it. Does it also happen on a fresh install? Do you get any error output or does it fail silently?

[FDiskas]

:pencil: It crashes with npm error with no clear error message.
And yes its fresh install.

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/nodejs', '/usr/bin/npm', 'run', 'production' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preproduction', 'production', 'postproduction' ]
5 info lifecycle @~preproduction: @
6 silly lifecycle @~preproduction: no script for preproduction, continuing
7 info lifecycle @~production: @
8 verbose lifecycle @~production: unsafe-perm in lifecycle true
9 verbose lifecycle @~production: PATH: /usr/lib/node_modules/npm/bin/node-gyp-bin:/var/www/html/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
10 verbose lifecycle @~production: CWD: /var/www/html
11 silly lifecycle @~production: Args: [ '-c',
11 silly lifecycle   'node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js' ]
12 silly lifecycle @~production: Returned: code: 2  signal: null
13 info lifecycle @~production: Failed to exec production script
14 verbose stack Error: @ production: `node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
14 verbose stack Exit status 2
14 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:877:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid @
16 verbose cwd /var/www/html
17 error Linux 4.9.5-200.fc25.x86_64
18 error argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "production"
19 error node v6.9.4
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error @ production: `node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
22 error Exit status 2
23 error Failed at the @ production script 'node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the  package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

[adriaanzon]

Hmm, looks similiar to this one: https://github.com/JeffreyWay/laravel-mix/issues/165#issuecomment-275855621. I'm not sure what's going on either.

[edjeavons]

It looks like toCompile.src.fileWithDir only contains the file's immediate parent directory, not it's full path. So if you have something like the following, the files will clash as "sass/app.scss" (this is my situation).

mix
  .sass('resources/cms/assets/sass/app.scss', 'public/cms/css')
  .sass('resources/frontend/assets/sass/app.scss', 'public/css');

I've tried changing the code back to how it was after commit be433ff97df7b9afac1ed243b72cb9e2acfd2029 and that does fix it but based on subsequent commits I guess there was a reason for the change.

[JeffreyWay]

@edjeavons Yeah that's the issue. It uses a folder-name/file.ext regular expression to find the file. In @FDiskas's case, for both mix.sass(), the folder and file names are the same. So it compiles twice, and produces that error on the second round.

Windows Users: I could use some help testing out a fix. We'll probably need to use a full file path instead, to prevent issues like this from popping up (as rare as it may be).

If you can help, please do:

laravel new mix-testing
cd mix-testing
npm install

Next, open node_modules/laravel-mix/setup/webpack.config.js and find this section, around line 125:

test: new RegExp(toCompile.src.fileWithDir.replace(/\\/g, '\\\\') + '$'),

The toCompile.src property contains all the path segments for your mix.sass request. We might be able to swap it out with:

test: new RegExp(toCompile.src.path.replace(/\\/g, '\\\\') + '$'),

Can you test that out (npm run dev), or try a couple variants, if it doesn't work? Use this as your webpack.mix.js file, and create dummy src files to match.

var mix = require('laravel-mix');

mix.sass('Modules/Admin/Resources/assets/sass/app.scss', 'public/modules/admin/css')
   .sass('resources/assets/sass/app.scss', 'public/css');

You'll know it works if you see both public/css/app.css and public/modules/admin/css/app.css.

[rn1ee]

Hi Jeffrey,

I did all you wanted and both files were generated...

[QWp6t]

Worked fine on my end as well.

[JeffreyWay]

Thanks!