This is my first experience with Laravel Mix, NodeJS and NPM. I've attempted to follow the documentation from Laravel and believe I am doing it right, but who knows.
I'm attempting to combine several CSS files into one.
webpack.mix.js
mix.combine([
'resources/assets/css/components.css',
'resources/assets/css/plugins.css',
'resources/assets/css/layout.css',
'resources/assets/css/default.css',
'resources/assets/css/custom.css'
], 'public/css/all.css');
if (mix.inProduction()) {
mix.version();
}
Run
npm run dev
It appears to run fine, and outputs the following:
DONE Compiled successfully in 92ms
11:11:33 AM
Built at: 11/23/2018 11:11:33 AM
Asset Size Chunks Chunk Names /css/all.css 0 bytes [emitted] Entrypoint mix = mix.js
The file all.css is created where I expect it to be however it's empty. What am I doing wrong? Thanks!
I belive that combine only works to minify and combine js files. For css you have to use styles
.styles(['inputA.css', 'inputB.css'], 'minified-output.css')
I have not found that in the docs, but I tried it and it works. Credits: https://stackoverflow.com/a/48312321/2311074
Related
I have installed Bootstrap icons into a Laravel/VueJS application using NPM, according to the instructions here, https://icons.getbootstrap.com/. What is the next step?
If I want to use the svg element in a blade template, do I need to compile it with webpack? Do I import it into a css file?
And how do I use it in single file VueJS components?
I am able to install bootstrap icons version 1.5.0 to Laravel 8 project and using laravel mix, by following these steps.
run this to install bootstrap icons into your project
npm i bootstrap-icons
add this to resources\sass\app.scss
#import '~bootstrap-icons/font/bootstrap-icons';
check webpack.mix.js file has this
mix.sass('resources/sass/app.scss', 'public/css')
run this to compile your change to public folder
npm run dev
then you can use icons anywhere in the page (either .blade or .vue file)
<i class="bi-alarm"></i>
Happy coding!!!
There is an error in the answer of mili, because if
#import '~bootstrap-icons/font/bootstrap-icons';
is included in resources\sass\app.scss then no #font-face directive is included in my app.css file when building with npm run dev. To make appear the directive I had to add the «css» extension so the correct #import would be:
#import '~bootstrap-icons/font/bootstrap-icons.css';
But there is another problem, in this case a problem of the builder, that produces that the icons are not showed by the browser (instead appear an square meaning that the broswer could not render the svg icon). The builder generates the following directive in public/css/app.css
#font-face {
font-family: "bootstrap-icons";
src: url(/fonts/vendor/bootstrap-icons/bootstrap-icons.woff2?dfd0ea122577eb61795f175e0347fa2c) format("woff2"),
url(/fonts/vendor/bootstrap-icons/bootstrap-icons.woff?94eeade15e6b7fbed35b18ff32f0c112) format("woff");
}
Laravel does not find the files because url() does not understand the absolute path (in my development environment). If you add «..» before the two paths, then all works (the icons appear in the page):
#font-face {
font-family: "bootstrap-icons";
src: url(../fonts/vendor/bootstrap-icons/bootstrap-icons.woff2?dfd0ea122577eb61795f175e0347fa2c) format("woff2"),
url(../fonts/vendor/bootstrap-icons/bootstrap-icons.woff?94eeade15e6b7fbed35b18ff32f0c112) format("woff");
}
The problem is that every time that you run npm run dev for any other package, the ".." are automatically overwritten, so the icons are not seen any more.
I have seen other people out there with the same problem, but I do not know where should be notified the issue and the solution. I will try to find a feedback window in https://getbootstrap.com/
Install Bootstrap in your Node.js powered apps with the npm package:
Copynpm install bootstrap
require('bootstrap') will load all of Bootstrap’s jQuery plugins onto the jQuery object.
After that use npm install bootstrap-icons to install bootstrap icons onto your project and include it in your app.js from node-modules.
After that, if npm run dev runs successfully, Then add the SVG element in your Vue components.
<svg class="bi bi-chevron-right" width="32" height="32" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6.646 3.646a.5.5 0 01.708 0l6 6a.5.5 0 010 .708l-6 6a.5.5 0 01-.708-.708L12.293 10 6.646 4.354a.5.5 0 010-.708z" clip-rule="evenodd"/></svg>
For demo purposes
Q> If I want to use the svg element in a blade template, do I need to compile it with webpack? Do I import it into a css file?
Ans.> No, you need not to compile while using in blade provided you import all the bootstrap files such as js files and css files.
For me the problem was fixed removing in the webpack on the sass instruction :
.options({ processCssUrls: false })
There is no need to declare a font face.
I have laravel Vue app and it works perfectly with chrome and firefox. but it doesn't work on Edge or IE11 and the console shows error on arrow function!?
How to compile or transpile to es5 with laravel mix and webpack?
could you show the correct configuration for webpack.mix.js?
tnx alot
UPDATE February 2020
If anyone still need help with this, mix already provide a babel compilation to es5:
A slight variation of mix.scripts() is mix.babel(). Its method
signature is identical to scripts; however, the concatenated file will
receive Babel compilation, which translates any ES2015 code to vanilla
JavaScript that all browsers will understand.
You can use it like this:
mix.babel(['public/js/es6file.js'], 'public/js/app.es5.js')
DOCS
In order to compile your es6 code to es5 follow the following steps:
1) install the babel-env preset
npm install #babel/preset-env --save
And then declare it in your .babelrc in the root directory:
{
"presets": ["#babel/preset-env"]
}
2) compile your code using
npm run dev //for dev environment
or
npm run prod // for production environment
after a lot of search, I've found out that this Vuecomponent causes the error "https://github.com/godbasin/vue-select2" how can I compile it to es5.
the edge console error:
Expected identifier, string or number
and the corresponding line that it shows is this:
setOption(val = []) {
this.select2.empty();
this.select2.select2({
-----> ...this.settings,
data: val
});
this.setValue(this.value);
},
sorry for taking your time
I am running Laravel 5.4 and using Laravel Mix to compile my assets. I have two SASS files for production. However, one of them needs to be compiled from SASS to CSS without minifying. I don't see how to do that. Here's what I have in my webpack.mix.js file:
mix.js(
[
'resources/assets/js/app.js',
],
'public/assets/js'
)
.sass(
'resources/assets/sass/app.scss',
'public/assets/css'
)
.sass(
'resources/assets/sass/pdf.scss',
'public/assets/css',
)
.version();
Now, the pdf.scss file is the one that needs to be "un-minified" for production. Is there any way to do so?
Thanks for answers!
Hi I found a solution to do this.
mix.sass("src/app.scss", "dist/", {
sassOptions: {
outputStyle: 'expanded',
},
})
sassOption help you to add some features to sass file.you can see all option here".
When you set the value of outputStyle equal to expanded, this will prevent the compression of SCSS files from damaging them. Of course, by doing this, the files will be compressed again.
Here's my webpack.mix.js file:
mix.js('resources/assets/js/app.js', 'public/js')
.combine(['public/js/app.js', 'node_modules/owl.carousel/dist/owl.carousel.js'], 'public/js/app.js');
I am launching js task, then combining all js files into a single one.
When i run npm run dev everything works as expected, but if i run npm run watch and then edit a file that being required in app.js (custom.js) this way:
require('./bootstrap');
require('./custom.js');
Then save the changes, mix is compiling very long, after it finishes my changes not reflected. Am i doing something wrong there?
Loop issue was because i used the same name when combining js files - app.js.
Correct way is not using combine, i've included my owl carousel file in app.js:
require('owl.carousel');
I'm building something using the Electron framework. I'm using Vue and SCSS, and I'd like to use Laravel Mix.
However, I can't figure out how to use Laravel Mix without ES6 compilation using babel. Since Electron is running on Node, there is no need to compile to ES5.
Looking through Laravel Mix's API, there seems to be no method that provides this functionality.
I created a .babelrc file with the following contents:
{
"plugins": [ ],
"presets": [ ]
}
However, after running npm run dev, the output file clearly has been transpiled to ES5.
According to line 248 of src/config.js in Laravel Mix's source code, the options taken from .babelrc overwrite the default options defined on line 220.
Laravel Mix Version: 1.7.2
Is there something I'm missing? Or does Laravel Mix simply not support this functionality?
Thanks in advance.
I had similar problem and it wasn't easy to find, but here's the solution:
mix.babelConfig({
only: ["./some-fake-dir"]
})
As the Babel documentation says:
Use it to explicitly enable Babel compilation of files inside the src
directory while disabling everything else.
So by entering some fake dir, you turn off the compilation all together.
More on this option here: https://babeljs.io/docs/en/options#only