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?
Related
I get the error Can't resolve '../api' when running npm run dev. I wrote a script to retrieve some data via an API call. This script works well when I put it in the vendor directory (vendor/badaso/core/src/js/api/modules). It is called by a store in resources/js/badaso/stores with
import api from "../../../../vendor/badaso/core/src/resources/js/api";
When I move this script to resources/js/badaso/api/modules and call it by...
import "../api"
Running "npm run dev", I get the following error.
Can't resolve '../api`
webpack.mix.js
const mix = require('laravel-mix');
//mix.js('resources/js/app.js', 'public/js') // original
mix.js('resources/js/*.js', 'public/js') // try -> same error
.postCss('resources/css/app.css', 'public/css', [
//
]);
// Can't resolve '../api'
// Badaso
mix.js("vendor/badaso/core/src/resources/js/app.js",
"public/js/badaso.js")
.sass("vendor/badaso/core/src/resources/js/assets/scss/style.scss",
"public/css/badaso.css")
.vue()`
I try this in webpack.mix.js
//mix.js('resources/js/app.js', 'public/js') // original
mix.js('resources/js/*.js', 'public/js') // try -> same error``
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?
I'm following Laravel documentation and have this file structure:
In app.scss I have:
#import 'style12';
.real-demo{
}
and in style12.scss some css code which i try to import.
When I run npm run dev I get following error:
Module build failed: Error: "../../resources/assets/sass/style12.scss" is not in the SourceMap.
at BasicSourceMapConsumer.SourceMapConsumer_sourceContentFor [as sourceContentFor] (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\source-map\lib\source-map-consumer.js:704:13)
at SourceMapGenerator.<anonymous> (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\source-map\lib\source-map-generator.js:235:40)
at Array.forEach (<anonymous>)
at SourceMapGenerator_applySourceMap [as applySourceMap] (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\source-map\lib\source-map-generator.js:234:32)
at MapGenerator.applyPrevMaps (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\postcss\lib\map-generator.js:146:22)
at MapGenerator.generateMap (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\postcss\lib\map-generator.js:194:46)
at MapGenerator.generate (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\postcss\lib\map-generator.js:297:25)
at LazyResult.stringify (C:\Users\mixei\Desktop\Projects\westcredit\node_modules\postcss\lib\lazy-result.js:294:24)
at C:\Users\mixei\Desktop\Projects\westcredit\node_modules\postcss\lib\lazy-result.js:231:27
Also here is my webpack.mix.js:
const { mix } = require('laravel-mix');
mix.options({
processCssUrls: false
});
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
Any help will be appreciated, thanks!
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.
I'm using a simple mix script to generate JS and CSS, but I have a question I haven't found the answer yet.
If I set the version() flag, will vendor.js be overwritten as well? If so, what are the advantages in production of using the extract method?
mix
.js('resources/assets/js/app.js', 'public/js')
.extract([
'lodash', 'jquery', 'vue', 'query-string',
'datatables.net', 'datatables.net-buttons', 'datatables.net-bs4', 'datatables.net-buttons-bs4', 'datatables.net-buttons/js/buttons.html5.js',
'select2', 'axios', 'moment', 'popper.js', 'bootstrap', 'vue-chartjs', 'v-tooltip', 'moment/locale/es', 'vue-moment',
'jszip/dist/jszip', 'pdfmake/build/pdfmake.js', 'pdfmake/build/vfs_fonts.js', 'sweetalert', 'vue-strap', 'vue-strap/dist/vue-strap-lang',
'moment-array-dates', 'vue-toast', 'randomcolor', 'url', 'google-maps'
])
.sass('resources/assets/sass/app.scss', 'public/css')
.copy('node_modules/font-awesome/fonts', 'public/fonts/vendor/font-awesome');
if (mix.inProduction()) {
mix.version();
}
It's so that your frequently changed app.js file will utilize cache busting, but your rarely changed vendor.js files can be kept in cache for as long as possible.
A more detailed explanation comes from Jeffrey Way:
https://github.com/JeffreyWay/laravel-mix/blob/master/docs/extract.md