I need to make sourceMaps for my mix.combine() assets but laravel mix only creates maps for default mix.js()
Code
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css').sourceMaps();
// admin
mix.styles([
'public/themes/admin/vendor/fontawesome-free/css/all.min.css',
'public/themes/admin/vendor/datatables/datatables.min.css',
'public/css/print.min.css',
'public/js/dist/summernote-bs4.css',
'public/themes/admin/css/admin.min.css'
], 'public/css/admin.css');
mix.combine([
'public/themes/admin/vendor/jquery/jquery.min.js',
'public/themes/admin/vendor/datatables/datatables.min.js',
'public/js/print.min.js',
'public/themes/admin/vendor/bootstrap/js/bootstrap.bundle.min.js',
'public/themes/admin/vendor/jquery-easing/jquery.easing.min.js',
'public/themes/admin/js/demo/datatables-demo.js',
'public/themes/admin/js/admin.min.js'
], 'public/js/admin.js').sourceMaps();
// front
mix.styles([
'public/themes/front/css/bootstrap.min.css',
'public/themes/front/css/mega-menu/mega_menu.css',
'public/themes/admin/vendor/fontawesome-free/css/all.min.css',
'public/themes/front/css/themify-icons.css',
'public/themes/front/css/magnific-popup/magnific-popup.css',
'public/themes/front/css/owl-carousel/owl.carousel.css',
'public/themes/front/revolution/css/settings.css',
'public/themes/front/css/slick/slick.css',
'public/themes/front/css/slick/slick-theme.css',
'public/themes/front/css/style.css',
'public/themes/front/css/responsive.css',
], 'public/css/front.css');
mix.combine([
'public/themes/front/js/jquery.min.js',
'public/themes/front/js/popper.min.js',
'public/themes/front/js/bootstrap.min.js',
'public/themes/front/js/mega-menu/mega_menu.js',
'public/themes/front/js/owl-carousel/owl.carousel.min.js',
'public/themes/front/js/slick/slick.min.js',
'public/themes/front/js/magnific-popup/jquery.magnific-popup.min.js',
'public/themes/front/js/isotope/isotope.pkgd.min.js',
'public/themes/front/js/jquery.appear.js',
'public/themes/front/js/counter/jquery.countTo.js',
'public/themes/front/revolution/js/jquery.themepunch.tools.min.js',
'public/themes/front/revolution/js/jquery.themepunch.revolution.min.js',
'public/themes/front/revolution/js/extensions/revolution.extension.actions.min.js',
'public/themes/front/revolution/js/extensions/revolution.extension.carousel.min.js',
'public/themes/front/revolution/js/extensions/revolution.extension.kenburn.min.js',
'public/themes/front/revolution/js/extensions/revolution.extension.layeranimation.min.js',
'public/themes/front/revolution/js/extensions/revolution.extension.migration.min.js',
'public/themes/front/revolution/js/extensions/revolution.extension.navigation.min.js',
'public/themes/front/revolution/js/extensions/revolution.extension.parallax.min.js',
'public/themes/front/revolution/js/extensions/revolution.extension.slideanims.min.js',
'public/themes/front/revolution/js/extensions/revolution.extension.video.min.js',
'public/themes/front/js/custom.js',
], 'public/js/front.js').sourceMaps();
result
/css/app.css
/js/app.js
/js/app.js.map <-- only app.js has map file
\css\admin.css
\css\front.css
\js\admin.js
\js\front.js <-- front.js didn't create map file
Any idea?
Related
With Laravel Mix I'm generating two different css/js files for Admin and for the main site like this:
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/js/site/app.js', 'public/js')
.postCss('resources/css/site/app.css', 'public/css', [
require('autoprefixer'),
require('postcss-import'),
tailwindcss('./tailwind.site.config.js'),
])
.options({
processCssUrls: false,
}).version();
mix.js('resources/js/admin/app.js', 'public/_admin/js')
.postCss('resources/css/admin/app.css', 'public/_admin/css', [
require('autoprefixer'),
require('postcss-import'),
tailwindcss('./tailwind.admin.config.js'),
])
.options({
processCssUrls: false,
}).version();
How can I tell vite to do the same thing ??
Thanks!!
The default vite.config.js is
import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
],
}),
],
});
Create two vite.config.js files, and also create two tailwind.config.js files for frontend & backend.
I have already posted this solution on github with demo laravel project.
https://github.com/pkfan/setup-laravel-vite-for-multiple-tailwind.config.js
I have upload a video about it.
watch this video on youtube
See https://laravel-vite.dev/guide/extra-topics/multiple-configurations.html.
You will need to add a configuration to config/vite.php, create a new vite.back-office.config.ts file, pass the configuration name to the #vite directive and run slightly different development and build commands.
The docs are TypeScript-focused, but the same technique will work for your JS/CSS assets.
Starting with Tailwind CSS v3.2, hacky workarounds are no longer needed.
You can now define the config file to use inside of your CSS files:
https://tailwindcss.com/blog/tailwindcss-v3-2#multiple-config-files-in-one-project-using-config
I built a single page application (SPA) using Laravel 8 + Vue.js + InertiaJs. Everything is working fine in the development environment, but when I compile assets for production, it shows me a blank page, and there is no error in the console. All assets are loading correctly with a 200 code, and everything seems to be OK, but the Vue app is not mounting!
webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-workbox');
mix.webpackConfig({
output: {
filename: '[name].js',
chunkFilename: 'js/[name].js',
}
}).js('resources/js/app.js', 'public/js')
.extract(['vue'])
.version();
Image1
Image2
Image3
try using the inertiajs webpack.mix.js provided by the pingCRM github:
const path = require('path')
const mix = require('laravel-mix')
const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
/*
|--------------------------------------------------------------------------
| 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/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
// prettier-ignore
cssImport(),
cssNesting(),
require('tailwindcss'),
])
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
},
},
})
.version()
.sourceMaps()
note you may have to follow the instructions for setting up tailwindcss which can be found here, only do this if you plan to use it otherwise remove the require('tailwindcss'), from the webpack file
you also may need to npm install --save-dev postcss-import and npm install --save-dev postcss-nesting the --save-dev flag will add it to your package.json file for future reference
I am trying to remove unused css rules from one or more of my sass files.
Research led me to postcss-uncss as the best option for removing unused css if you do not use server-side rendering (see: https://www.purgecss.com/comparison)
https://github.com/uncss/postcss-uncss
Now, postcss-uncss is a wrapper for uncss: https://github.com/uncss/uncss
However, the uncss documentation is confusing to me, and the example configuration here is not useful: https://github.com/uncss/postcss-uncss#example-configuration
How does one configure postcss-uncss for Laravel Mix?
THis is what I have so far:
mix.js('resources/js/app.js', 'public/js')
.options({
processCssUrls: false,
postCss: [
require('postcss-uncss'),
tailwindcss('./tailwind.config.js')
],
})
I want to:
Tell it which laravel routes to use (or 'all' should also be fine)
Where my sass / scss files are located: /resources/sass/* (example files: /resources/sass/app.scss, /resources/sass/admin/admin.scss, etc)
Where to put the output ie the compiled (and cleaned up) css without the unused rules: /public/css/* (so as to preserve the same structure, for example: /public/app.css, /public/admin/admin.css, etc)
Thoughts would be greatly appreciated.
This is what I ended up doing (used purgecss, which turns out, is a better option than uncss, according to my conversation with Adam Wathan
let mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
// Removes unused CSS
// According to Discord chat: Running Purge CSS as part of Post CSS is a ton faster than laravel-mix-purgecss
// But if that doesn't work use https://github.com/spatie/laravel-mix-purgecss
const purgecss = require('#fullhuman/postcss-purgecss')({
// Specify the paths to all of the template files in your project
content: [
'./resources/views/*.php',
'./resources/views/**/*.php',
'./resources/js/components/*.vue',
'./resources/js/components/**/*.vue',
],
// Include any special characters you're using in this regular expression
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
});
mix.options({
clearConsole: true, // in watch mode, clears console after every build
processCssUrls: false,
postCss: [
//require('tailwindcss'),
tailwindcss('./tailwind.config.js'),
// to enable purgecss on production only
...process.env.NODE_ENV === 'production' ? [purgecss] : []
// to enable on all environments, local and production
//purgecss
],
})
;
Perhaps you might try the Spatie package?
Let's install it.
npm i laravel-mix-purgecss
Call purgeCss() in your webpack.mix.js.
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.purgeCss({ enabled: true });
I am trying to load Bootstrap Vue into a Laravel 5.6 project
The official docs say to modify your webpack.config.js file like:
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
Webpack docs: https://webpack.js.org/guides/asset-management/#loading-css
I don't have a webpack.config.js file so I tried loading the CSS in with Laravel mix
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.styles('node_modules/bootstrap-vue/dist/bootstrap-vue.css', 'public/css');
This give me an error
mix.combine() requires a full output file path as the second argument.
and I'm not convinced it's the right way to do it.
What is the proper way to add bootstrap-vue into a new Laravel 5.6 project?
Import the Bootstrap Vue styles in your app.scss file directly, instead of through mix:
// app.scss
#import "~bootstrap/dist/css/bootstrap.css";
#import "~bootstrap-vue/dist/bootstrap-vue.css";
// webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
Laravel Mix already has the CSS loader configured so you don't need to set up a separate webpack.config.js file.
This is my code:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'resources/assets/css')
.styles([
'resources/assets/css/animate.min.css'
],'resources/assets/css/style.css')
.combine(['resources/assets/css/style.css','resources/assets/css/app.css'], 'public/css/app.css');
and results:
\js\app.js 928 kB
\resources\assets\css\app.css 185 kB
\resources\assets\css\style.css 52.8 kB
\css\all.css 52.8 kB
You can see,It can merge app.css with style.css. output is only style.css as all.css
what is wrong?