Category : laravel-mix

I am deploying a Laravel application using the Docker platform on AWS Elastic Beanstalk. One of the steps in my Dockerfile is bundling assets using Laravel mix by running npm run production as seen below. # Dockerfile … RUN echo "${ALPINE_MIRROR}/edge/main" >> /etc/apk/repositories && apk add –no-cache nodejs nodejs-npm –repository="http://dl-cdn.alpinelinux.org/alpine/edge/community" && npm install && npm ..

Read more

My current webpack.mix.js configuration is: mix.js(‘resources/js/app.js’, ‘public/js’) .postCss(‘resources/css/app.css’, ‘public/css’, [ require(‘postcss-import’), require(‘tailwindcss’), ]).extract(); If I have another CSS, let’s say ‘plugin-1.css’, how can I merge both so that I get an output of one app.css? I tried [‘resources/css/app.css’, ‘plugin-1.css’] but that’s not an option. Sourc..

Read more

Am using laravel mix and have configured webpack split chunks as follows mix.js(‘resources/js/app.js’, ‘public/js’) .sass(‘resources/sass/app.scss’, ‘public/css’) .vuetify(‘vuetify-loader’); mix.webpackConfig({ optimization : { splitChunks: { chunks: "all", minSize: 200000, maxSize: 244000, } } }); The above works but the vendor files are not created in the javascript and css directory. The manifest produced has the following. { ..

Read more

It there any way to provide different plugins options for each entry? For example: mix .sass(‘resources/assets/main.scss’, ‘public/css/main.css’).options({ //Set purifycss config options for main style (Mainly different paths) purifyCss: {}, }) .sass(‘resources/assets/admin.scss’).options({ //Set purifycss config options for admin style purifyCss: {}, }) I have already tried the above configuration and purifyCss options are shared and not ..

Read more

While running npm run hot the chunk is not generated and the error in console is Reason: ChunkLoadError: Loading chunk vendors~vue-component failed. P.S – works for npm run watch and npm run dev app.js Vue.component(‘VueComponent’, () => import(/* webpackChunkName: "vue-component" */ ‘./components/VueComponent.vue’)); webpack.mix.js const mix = require(‘laravel-mix’); const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’); mix.webpackConfig({ plugins: ..

Read more

I have a project using Laravel Mix and the Element component library – I’ve just installed Storybook, but the font files included in Element are no longer being loaded correctly in the browser (they’re just showing up as empty squares). Simply installing the below packages has somehow broken font loading (uninstalling them fixes it). @storybook/addon-actions: ..

Read more

I got a sample project using laravel and I try to add a slider demo to my project but I got a problem. Here is my code. slider.blade.php <script src="{{asset(‘js/jssor.slider-28.0.0.min.js’)}}" type="text/javascript"></script> app.blade.php <head> <link href="{{ mix(‘css/app.css’) }}" rel="stylesheet"></head> < body > <div id="app"> @include(‘layouts.nav’) <main class="py-4"> @yield(‘slider’) <div class="container"> @yield(‘content’) </div> </main> </div> <script src="{{ ..

Read more

I am trying to change the CSS output style in webpack.mix.js, however it only seems to affect the Development build. How do I apply outpoutStyle options to the Production build? Here, is my code in the webpack.mix.js file, changing the value of "outputstyle" only affects the Development build. mix.js(‘resources/js/app.js’, ‘public/js’) .sass(‘resources/sass/app.scss’, ‘public/css’, { outputStyle : ..

Read more

I’m trying to purge my css file with laravel-mix-purgecss. This is what i’ve done: Installed it with NPM Added .purgeCss() to my webpack.mix.js file Added require(’laravel-mix-purgecss’); to my app.js But all I get when running npm run dev, it fails at: node_modules/webpack-cli/bin/cli.js:93 I don’t understand the error message, it’s full of code, but no useful ..

Read more

I have the following dummy Laravel 5.5 + React project: $ git clone https://github.com/tlg-265/laravel-5.5-react.com $ cd laravel-5.5-react.com $ npm i $ npm run watch My goal is: while: $ npm run watch is running, whenever some of the files: /template/template-XX.json is modified, the script /template/listener.js be executed. When that happens, the variable: template (inside: listener.js) ..

Read more

I have a Laravel project using Laravel Mix, Vue.js and Sass. The following is the content of the webpack.mix.js file in the project: const mix = require(‘laravel-mix’); mix.js(‘resources/js/app.js’, ‘public/js’) .extract([‘vue’]) .sass(‘resources/sass/vendor.scss’, ‘public/css/’) .sass(‘resources/sass/app.scss’, ‘public/css/’); This Mix file is properly compiling all the CSS and JS assets for me when I import all of my Vue ..

Read more