I am using Laravel Mix but it is not creating one of the files specified. My webpack.mix.js looks like this:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/mail.scss', 'resources/views/vendor/mail/html/themes/default.css');
It does compile successfully, but the default.css file is not created. The app.js and app.css is working as it should. However, the themes folder is empty.
It turns out Laravel Mix uses the public folder as default. Meaning, my file was created (as were the directories) in the public folder. To "bypass" this, I added ../ to the path, like this:
mix.sass('resources/assets/sass/mail.scss', '../resources/views/vendor/mail/html/themes/default.css');
First you should add the error messages in your question but I think its due to this:
You do not need to specify a path with a filename just use the path like this:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/mail.scss', 'resources/views/vendor/mail/html/themes');
Related
I have a Laravel application. Currently there's a single package.json file in the root of the project that has scripts to build the frontend app.js and app.css as well as backend.
Can I use two different ones that would be in frontend/package.json and backend/package.json so that front-end has only front end related packages and scripts while the backend has only backend related packages and scripts.
Thoughts?
In Laravel5, we have laravel-mix that can help you do that easily. In the root directory of your project, there is a file known as webpack.mix.js, and in it by default there are the following:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
If you want to have separate js and scss files, just add here. Say you want to add theme.js and theme.scss for the frontend, just include as follows:
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/theme.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/theme.scss', 'public/css');
Of course don't forget to add the corresponding files inside the resources/js (changed from laravel 5.5 onwards) and resources/sass respectively.
As title says when I run npm run dev or run watch it compiles just app.js and app.scss to public as it should but for additional files it just recopy content.
Using Laravel 5.7 and I added two additional files to resources (user.js & user.scss)
Also I added two more lines into webpack.mix:
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/user.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/user.scss', 'public/css');
User files are just recopied like those in resource folder..
This works fine in laravel 5.6 and same files are used..
If you wanna get only one file in public you need to add require('./user'); at the end of your app.js.
Same for scss files, add #import 'user'; into app.scss, but rename user.scss to _user.scss.
For separate files in my project on laravel 5.7
// App
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
// Admin
mix.js('resources/js/admin.js', 'public/js')
.sass('resources/sass/admin.scss', 'public/css');
Due to security reasons I move all directories and files into a main directory and took out all files/directories from public folder to root of Laravel project. Now I want to npm run dev in order to compile scss files to css and js to js. However each time I run npm run dev it creates a folder named public inside the main folder I had created and put compiled files into that. But I want to put it in root folder which contains: css-js-svg-fonts-index so I changed
This:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
to this:
mix.js('resources/js/app.js', '../../js')
.sass('resources/sass/app.scss', '../../css');
but no result :( it just creates public folder inside main folder that is not the root I want it to be one level upper.
Thanks
I found it :)
mix.setPublicPath('../')
.js('resources/js/app.js', 'js')
.sass('resources/sass/app.scss', 'css');
but previously I was wrong with an extra slash which was:
mix.setPublicPath('../')
.js('resources/js/app.js', '/js')
.sass('resources/sass/app.scss', '/css');
I have been able to get this to work on just a basic vue application but I am having trouble bringing it across to laravel vue. I was able to add module in vue.config.js in the vue application that would import any scss files i added. Using the same code in the laravel vue app in the webpack.mix.js file it is not compiling correctly. This is my webpack.mis.js file:
let mix = require('laravel-mix');
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "./resources/assets/sass/variables.scss";`
}
}
}
};
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I have also attempted the other configurations suggested from the docs but I haven't succeeded. I have also seen a lot of answers suggesting to just include the relative path to the files I wish to include in every component but this is inefficient and error prone as the application develops. There must be a way to achieve this and I have just got the configuration incorrect.
Any advice is appreciated, thanks.
Laravel Mix has an option exactly for this. It's globalVueStyles.
Check out the documentation: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/options.md.
It will only work with extractVueStyles active:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
extractVueStyles: true,
globalVueStyles: 'resources/sass/_variables.scss',
})
.version();
I'm trying to use webpack with a file from a folder located on Project/app/Dashboard/Resources/scss/main.scss and Project/app/Dashboard/Resources/js/main.js, but I get an error.
I've try:
mix.js('app/Dashboard/Resources/js/main.js', 'public/js/dashboard.js')
.sass('app/Dashboard/Resources/scss/main.scss', 'public/css/dashboard.css');
-
mix.js('app/Dashboard/Resources/js/main.js', 'public/js')
.sass('app/Dashboard/Resources/scss/main.scss', 'public/css');
-
mix.script('app/Dashboard/Resources/js/main.js', 'public/js')
.sass('app/Dashboard/Resources/scss/main.scss', 'public/css');
-
mix.sass('app/Dashboard/Resources/scss/main.scss', 'public/css');
-
mix.sass('app/Dashboard/Resources/scss/main.scss', 'public/css/dashboard.css');
So... yes... This is awkward... In one of the .scss files, I had a link to a missing image. Check all the url, they should exist.