Category : laravel-mix

I have deployed laravel react application on the server, inside a folder namely patients/ so the complete URL for the app is domain.com/patients app.js and app.css files are not found, I am facing a 404 error, because it is trying to serve files from domain.com/ instead of domain.com/patients/app.css and domain.com/patients/app.js if I change mix to ..

Read more

This is for my Laravel + Vue SPA app. I have this Laravel Mix config file here: const path = require(‘path’); const fs = require(‘fs-extra’); const mix = require(‘laravel-mix’); const tailwindcss = require(‘tailwindcss’); require(‘laravel-mix-bundle-analyzer’); function publishAssets() { const publicDir = path.resolve(__dirname, ‘./public’); if (mix.inProduction()) { fs.removeSync(path.join(publicDir, ‘dist’)); } fs.copySync(path.join(publicDir, ‘build’, ‘dist’), path.join(publicDir, ‘dist’)); fs.removeSync(path.join(publicDir, ‘build’)); ..

Read more

Trying to build out specific purgedCSS files for a project with rather large complete CSS file. However PurgeCSS refuses to only purge the specified file after mix.copy(), and still purges the main app.css file. mix.sass(‘resources/sass/app.scss’, ‘assets/css’).options({ processCssUrls: false, postCss: [], autoprefixer: { options: { browsers: [‘last 6 versions’] } } }) .copy(‘assets/css/app.css’, ‘purge/css/home.css’) .purgeCss({ enabled: ..

Read more

I’ve read through the documentation on using variables from my Laravel .env in my vue application through webpack mix. Simply add MIX_ to a variable in my .env, so I have APP_URL=https://myurl.com MIX_APP_URL=${APP_URL} and then access these with process.env.MIX_APP_URL, but when I check it with console.log, I get undefined. However If I access process.env.APP_URL in ..

Read more

I’m using a config file named webpack.2021.mix.js, see comments: const mix = require(‘laravel-mix’); mix .js(‘resources/2021/js/app.js’, ‘public/2021/js’) .copy(‘resources/2021/company.html’, ‘public/2021/company.html’) .sass(‘resources/2021/sass/app.scss’, ‘public/2021/css’, {processCssUrls: false}) //don’t touch URL’s! .webpackConfig({ module: { rules: [ { test: /.svg$/, //try to generate CSS code like ‘background: url("data:image/svg+xml,…");’ use: [ { loader: ‘url-loader’, options: { limit: 8192, encoding: false }, }, ] ..

Read more

when I run npm run prod and upload this files to the server manifest.js vendor.js app.js i have problem with (manifest, vendor) each one take 3 seconds to load my webpack.mix.js: const mix = require("laravel-mix"); require(‘laravel-mix-purgecss’); mix.js("resources/js/app.js", "public/js") .js("resources/js/admin.js", "public/js") .sass("resources/sass/app.scss", "public/css").purgeCss() .sass("resources/sass/admin.scss", "public/css").purgeCss() .copy(‘node_modules/ckeditor/config.js’, ‘public/js/ckeditor/config.js’) .copy(‘node_modules/ckeditor/styles.js’, ‘public/js/ckeditor/styles.js’) .copy(‘node_modules/ckeditor/contents.css’, ‘public/js/ckeditor/contents.css’) .copyDirectory(‘node_modules/ckeditor/skins’, ‘public/js/ckeditor/skins’) .copyDirectory(‘node_modules/ckeditor/lang’, ‘public/js/ckeditor/lang’) .copyDirectory(‘node_modules/ckeditor/plugins’, ..

Read more

Laravel Mix Version: 5.0.5 (npm list –depth=0) Node Version (node -v): 12.16.1 NPM Version (npm -v): 6.13.4 OS: Win10 Description: I’ve just experienced for first time this error which puzzles me. I could not find solution that worked for me by googling. I’ve tried reseting everyhing by deleting node_modules and reinstalling, but that did not ..

Read more

I need to compile the same scss file two times, with different sassOptions. Something like: mix.sass(‘resources/sass/master.scss’, ‘public/css’, { sassOptions: { includePaths: [ ‘resources/sass/firstconfig’ ], } }) .sass(‘resources/sass/master.scss’, ‘public/css’, { sassOptions: { includePaths: [ ‘resources/sass/secondconfig’ ], } }) Ideally, this would generate a master_firstconfig.css and a master_secondconfig.css. Then, depending on the current config, I will load ..

Read more

I have a laravel 8 project and upgraded laravel-mix to v6 to support vue 3. The problem is the createWebHistory from vue-router 4 package.json { "private": true, "scripts": { "development": "mix", "watch": "mix watch", "watch-poll": "mix watch — –watch-options-poll=1000", "hot": "mix watch –hot", "production": "mix –production" }, "devDependencies": { "@vue/compiler-sfc": "^3.0.3", "axios": "^0.19", "cross-env": "^7.0", ..

Read more

I started a project with Vuejs and Laravel using Laravel Mix. It works for the most part, but when I’m trying to divide my component up into separate files and load them in the .vue file like this: <template src="./comp.html"></template> <script src="./comp.ts" lang="ts"></script> <style src="./comp.scss" scoped lang="scss"></style> I’m getting this error: error in ./resources/js/components/comp/comp.html?vue&type=template&id=c2090546&scoped=true Module ..

Read more

I have a setup with Laravel+Docker. Every change in CSS is causing the whole page to reload instead of using the HMR. My mix config is super simple const mix = require(‘laravel-mix’); mix.js(‘resources/js/app.js’, ‘public/js’) .postCss(‘resources/css/app.css’, ‘public/css’, [ require(‘postcss-import’), require(‘tailwindcss’), ]) .options({ hmrOptions: { host: ‘localhost’, port: 80 } }) .browserSync({ proxy: ‘localhost’ }) .webpackConfig(require(‘./webpack.config’)); if ..

Read more

I have some CSS files that I want to process with PostCSS, but my current config is throwing an error: Module not found: Error: Can’t resolve ‘D:OpenServerdomainstest.locpubliccssstyles.css’ in ‘D:OpenServerdomainstest.loc’ I believe PostCSS starts looking for the input file before it is generated. How do I make laravel mix wait for styles.css to be generated? Here ..

Read more

TLDR: Has anybody ever used @cypress/vue plugin together with Laravel-Mix in a Laravel project? I’m creating a Laravel 7.24 project with VueJs 2.6.12 and Vuetify 2.3. I’m creating custom Vue components and I want to unit test them with Cypress (4.8) and @cypress/vue plugin. I’ve installed both, Cypress and @cypress/vue. Now I’m at the point ..

Read more