Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Compile multiple css/js files doesn't work
See original GitHub issueI currently have the following webpack.mix.js file:
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.
|
*/
// Fix Foundation is not a function
mix.webpackConfig({
resolve: {
alias: {
'jquery': require.resolve('jquery')
}
}
});
mix.js('resources/assets/js/app.js', 'public/js').extract(
['foundation-sites', 'jquery', './resources/assets/js/laravel.js']
);
mix.sass('resources/assets/sass/app.scss', 'public/css');
mix.js('resources/assets/admin/js/app.js', 'public/admin/js').extract(
['bootstrap-less', 'jquery', './resources/assets/admin/js/laravel.js']
);
mix.less('resources/assets/admin/less/app.less', 'public/admin/css');
mix.version();
mix.copy('node_modules/font-awesome/fonts', 'public/fonts/font-awesome');
Unfortunately it only mixes one css and one js file and overwrites them although they are in different folders.
Output:
DONE Compiled successfully in 14874ms
Asset Size Chunks Chunk Names
fonts/fontawesome-webfont.woff?fee66e712a8a08eef5805a46892932ad 98 kB [emitted]
error-bg.jpg?5df682a513bde14949643fbe6d0fbe18 35.8 kB [emitted]
login-register.jpg?0c8d643cc70ae43c859da5b4e1b991b3 549 kB [emitted] [big]
profile-menu.png?afc27090744412db6c7a5def5fd8523e 21.8 kB [emitted]
fonts/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760 109 kB [emitted]
fonts/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512 45.4 kB [emitted]
fonts/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158 23.4 kB [emitted]
fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb 18 kB [emitted]
fonts/fontawesome-webfont.eot?674f50d287a8c48dc19ba404d20fe713 166 kB [emitted]
fonts/fontawesome-webfont.svg?912ec66d7572ff821749319396470bde 444 kB [emitted] [big]
fonts/fontawesome-webfont.ttf?b06871f281fee6b241d60582ae9369b9 166 kB [emitted]
fonts/fontawesome-webfont.woff2?af7ae505a9eed503f8b8e6982036873e 77.2 kB [emitted]
fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1 20.1 kB [emitted]
fonts/shape1.svg?ae011d37cceae760ab311d8b9fa924bf 759 bytes [emitted]
/js/app.e4c3688d9d2c6ed3d8bc.js 880 kB 0, 2 [emitted] [big] app
/js/vendor.0ccb9485f3e36472e423.js 337 kB 1, 2 [emitted] [big] vendor
/js/manifest.d41d8cd98f00b204e980.js 5.63 kB 2 [emitted] manifest
/admin/css/app.753c9051c1b242d397c4.css 559 kB 0, 2 [emitted] [big] app
mix-manifest.json 238 bytes [emitted]
fonts/font-awesome/fontawesome-webfont.woff 98 kB [emitted]
fonts/font-awesome/fontawesome-webfont.eot 166 kB [emitted]
fonts/font-awesome/fontawesome-webfont.ttf 166 kB [emitted]
fonts/font-awesome/fontawesome-webfont.woff2 77.2 kB [emitted]
fonts/font-awesome/fontawesome-webfont.svg 444 kB [emitted] [big]
fonts/font-awesome/FontAwesome.otf 135 kB [emitted]
Process finished with exit code 0 at 22:10:17.
Execution time: 20,267 ms.
Issue Analytics
- State:
- Created 7 years ago
- Comments:10
Top Results From Across the Web
Compile multiple css/js files doesn't work · Issue #197 - GitHub
I currently have the following webpack.mix.js file: ... By default, we are compiling the Sass | file for the application as well as...
Read more >How do I compile multiple css files and javascript files into one ...
I am trying to figure out how they compiled the code so I don't have to modify the bundled file and I can...
Read more >Should I combine CSS/JS Files on my Website? - GTmetrix
Most webpages typically have several CSS and JS files. Combining all the stylesheets or scripts into a singular respective file may result in...
Read more >Basic Features: Built-in CSS Support - Next.js
Next.js allows you to import CSS files from a JavaScript file. This is possible because Next.js extends the concept of import beyond JavaScript....
Read more >How to Minify Your Website's CSS, HTML & Javascript
Under the settings tab, you will find options to combine and minify HTML and CSS files. Although minifying JavaScript is only available in...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
This can be done by following way:
Above code will create three folders in public directory name admin, app, common with CSS and JS folders.
Now you can use them in different master layouts for admin panel and front-end.
@a1iraxa Thanks so much for this. Its still helpful in 2020.