I've created clear vue-cli webpack project, installed font-awesome via npm.
Then inside ./assets/scss/styles.scss I'm importing it (#import '~font-awesome/scss/font-awesome.scss';).
When I run npm start there are errors:
These relative modules were not found:
* ../fonts/fontawesome-webfont.eot in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./src/assets/scss/styles.
scss
* ../fonts/fontawesome-webfont.eot?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./src/assets/scss
/styles.scss
* ../fonts/fontawesome-webfont.svg?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./src/assets/scss
/styles.scss
* ../fonts/fontawesome-webfont.ttf?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./src/assets/scss
/styles.scss
* ../fonts/fontawesome-webfont.woff2?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./src/assets/sc
ss/styles.scss
* ../fonts/fontawesome-webfont.woff?v=4.7.0 in ./node_modules/css-loader?{"sourceMap":false}!./node_modules/postcss-loader/lib?{"sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false}!./src/assets/scs
s/styles.scss
How can I fix it? Thanks!
OK, it was an easy fix. It was need to include:
$fa-font-path: "~font-awesome/fonts";
for proper fonts import.
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 want to add a carousel plugin into laravel.
https://github.com/OwlCarousel2/OwlCarousel2
so I run npm install --save owl.carouse and add following code into index.blade.php
<script src="/node_modules/owl.carousel/dist/owl.carousel.js"></script>
The owl.carousel.js is inside my project, but when I run npm run watch, and look at the browser, there show an error in the console:
GET http://127.0.0.1:8000/node_modules/owl.carousel/dist/owl.carousel.js 404 (Not Found)
Why is that?
You should not import it through a script tag. Add it in your bootstrap.js file
require('owl.carousel');
require() will use the node_modules as the root dir
You can of course use require in any other .js file that you then import through a script tag.
If you are using VueJs you do at the top of the vue component
import owl from 'owl.carousel'
Your web server does not have access to node_modules directory.
You'd better use gulp to copy and bundle it to public directory.
Or else if you want, you can do it manually. Copy the script to the public directory.
I usually make asset/js directory under the public and then copy owl under it.
You will have:
<script src="/asset/js/owl.carousel/dist/owl.carousel.js"></script>
Add this line in your main .scss file:
#import '~owl.carousel/dist/assets/owl.carousel.css';
Compile the css with npm run dev
You can repeat these steps for your javascript files
Edit:
If you do not make use of Laravel mix yet, read this documentation first. https://laravel.com/docs/5.6/mix
I'm using laravel 5.4, with webpack and vue. I'm not sure how to add new libraries to use in vue.
For example, I run
npm install --save jquery vue2-select
What do I need to do next? I need to add:
Import Selectize from 'vue2-selectize'
or
Require ('vue2-selectize')
In the
resources / assets / js / app.js
file or
resources / assets / js / bootstrap.js
?
Can someone help me with the correct order to work?
Thank you!
import or require do almost same thing. But import is more popular.
npm install --save jquery vue2-selectize You should run this in your root folder and npm will place those packages in 'node_modules'. Then import command will look in 'node_modules' and load it to your file.
import Selectize from 'vue2-selectize' in that file where you want to use Selectize.
resources / assets / js / app.js yes, this is where your front-end app start from. In vue documentation you can read more about single file components
watch this laracast series and may be some other. They are easy to follow.
Well, I just installed fresh Laravel 5.4. Then installed npm and decided first time to use webpack instead of gulp.js. As you know, Laravel default provides sass Bootstrap integration. Used this command to generate my css from sass.
npm run dev
Bootstrap, Jquery worked perfect, but Glyphicons weren't displayed. Checking my public/css/app.css I saw, that Glyphicons font-face path are not suitable.
src: url(/fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1);
If I, manually use ../fonts instead of /fonts it will work. I tried to figure out and edit the default path. In _variables.css I set:
$icon-font-path = "../fonts" - but npm gives error.
By default it is: "~bootstrap-sass/assets/fonts/bootstrap/"
Copied fonts folder inside puclic/css folder, didn't work.
Added options to the webpack.mix.js file:
options({processCssUrls: false})
and in _variables.css again set:
$icon-font-path = "../fonts"
Run npm-run-dev and it worked, glyphicons were displayed. But, I don't want to set false for processCssUrls. Because, in this case I will not able to minimize css files using command: npm run production.
Also, I followed this question, but couldn't find any answer, all solutions didn't work.
glyphicons not showing with sass bootstrap integration
Finally, found the solution. In webpack.config.js set:
publicPath: '../'
instead of Mix.resourceRoot
{
test: /\.(woff2?|ttf|eot|svg|otf)$/,
loader: 'file-loader',
options: {
name: 'fonts/[name].[ext]?[hash]',
publicPath: Mix.resourceRoot
}
},