Wrong directory location in css using npm - php

I added fontawesome to my site by doing these steps:
webpack.mix.js configuration.
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
npm install #fortawesome/fontawesome-free
In my package.json.
// Font Awesome
"dependencies": {
"#fortawesome/fontawesome-free": "^5.13.0",
In my app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700&display=swap');
#import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
//Fontawesome
#import '~#fortawesome/fontawesome-free/scss/fontawesome';
#import '~#fortawesome/fontawesome-free/scss/regular';
#import '~#fortawesome/fontawesome-free/scss/solid';
#import '~#fortawesome/fontawesome-free/scss/brands';
When I run npm run dev the fontawesome css directory location in my app.css is
url(/fonts/vendor/#fortawesome/fontawesome-free/webfa-regular-400.eot?6b20949b3a679c30d09f64acd5d3317d);
instead of
url(../fonts/vendor/#fortawesome/fontawesome-free/webfa-regular-400.eot?6b20949b3a679c30d09f64acd5d3317d);
Any idea how to fix this? New to Laravel, migrating from Yii 1. Thank you.

*try to use a relative path example:
#import '../fonts/vendor/#fortawesome/fontawesome-free';

Related

Adding bootstrap in Symfony 4

In my Symfony 4 project, I try to add bootstrap as an import after
yarn add bootstrap --dev
As I follow documentation, I tried to import bootstrap as follows:
#import "~bootstrap/scss/bootstrap";
When I run yarn encore dev, it says module not found.
Than I tried this:
#import "../../node_modules/bootstrap/scss/bootstrap.scss";
The output is:
Syntax Error: ModuleNotFoundError: Module not found: Error: Can't resolve './alert' in 'C:\Users\tolga\GIT\artifex\node_modules\bootstrap\scss'
What am I missing? alert.scss is there but it cannot find module. What should I try?
It seems I somehow solved the problem. First of all the import directory is this:
#import "../../node_modules/bootstrap";
I don't know why tilde didn't work. Adding sass-loader didn't help.
Old subject but the solution is to change the extension of file app.css to app.scss.

Can't import "bootstrap-select" in app.scss in Laravel

I'm doing following:
npm install bootstrap-select
npm run dev
in app.scss
// Bootstrap Select
#import "node_modules/bootstrap-select/sass/bootstrap-select.scss";
In console it says:
jQuery.Deferred exception: $(...).selectpicker is not a function
TypeError: $(...).selectpicker is not a function
I can see it installed bootstrap-select, how do I import it correctly?
In your /resources/assets/sass/app.scss import bootstrap-select:
#import "../../../node_modules/bootstrap-select/sass/bootstrap-select.scss";
You also need to import bootstrap-select.js to resources/assets/js/app.js make it work:
require('../../../node_modules/bootstrap-select/dist/js/bootstrap-select');
Its possible to add Bootstrap-Select without the complete path:
require('bootstrap-select');
require('bootstrap-select/js/i18n/defaults-de_DE');
#import '~bootstrap-select/sass/bootstrap-select.scss';
in laravel 5.7
in app.scss
#import '~bootstrap-select/sass/bootstrap-select.scss';
in app.js
require('../../node_modules/bootstrap-select/dist/js/bootstrap-select.min');
npm install bootstrap-select
npm run dev
In resources\assets\sass\app.scss
#import "node_modules/bootstrap-select/sass/bootstrap-select.scss";
in resources\assets\js\app.js
require('../../../node_modules/bootstrap-select/dist/js/bootstrap-select.js');
Add app.scss in head
Add app.js before end of body

How to use rtlcss node package with twitter-bootstrap on Laravel?

It may sound stupid but I've recently started working with laravel mix for compiling scss and js files. But I can't understand something.
I want to use rtlcss npm to make the twitter-bootstrap rtl.
This is the default app.scss asset of Laravel
// Fonts
#import url("https://fonts.googleapis.com/css?family=Raleway:300,400,600");
// Variables
#import "variables";
// Bootstrap
#import "~bootstrap-sass/assets/stylesheets/bootstrap";
And this is the default app.js asset:
window._ = require('lodash');
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
I've installed the rtlCSS through node package, now I what I want to happen is when I run npm run dev or the watcher, it compiles the bootstrap scss file and make it RTL and put it in the public css directory like it does with the default LTR that is.
Your can easily generate RTL css with Laravel Mix:
First, to use Laravel mix you should install the necessary libraries from npm:
npm install
Then, install webpack-rtl-plugin: npm install webpack-rtl-plugin --save-dev
Then, in webpack.mix.js (located at the root of your laravel app) import the pulgin at the top:
let WebpackRTLPlugin = require('webpack-rtl-plugin');
Then, replace the:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
with the following:
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.webpackConfig({
plugins: [
new WebpackRTLPlugin()
]
});
Finally, run: npm run dev (for develpoment) or npm run prod (for production)
As a result, Larave Mix will generate:
public/css/app.css (the original css from sass)
public/css/app.rtl.css (the RTL css version)
and public/css/app.js
I tried multiple solutions with no luck after multiple tries the below code works fine and it covers all mix features like versioning, source-maps, etc.
Don't forget to install rtlcss package
mix.sass('resources/sass/app.scss', 'public/css');
mix.postCss('public/css/app.css', 'public/css/app.rtl.css', [
require('rtlcss'),
]);

Use PrimerCSS.io in Laravel 5.5

I am building an app with Laravel & I want to build it with PrimerCSS.io and remove Bootstrap completely.
I followed the docs, but I could not complete it.
I replaced #import "~bootstrap-sass/assets/stylesheets/bootstrap";
with
#import "primer-css/index.scss"; in
resources/assets/sass/app.scss and ran npm run watch.
But encountered problem
Module build failed:
#import "primer-css/index.scss;
File to import not found or unreadable:
Here's what I got to work with a fresh install of Laravel 5.5 (this Laracasts post led me on the right track).
First, we need to use the includePaths option for node-sass:
// webpack.mix.js
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css', {
includePaths: ["node_modules"]
});
Then, we can just include the primer-css index.scss file:
// resources/assets/sass/app.scss
#import "~primer-css/index";
(Note that the above ~ is equivalent to ../../../node_modules/)

cant import compass to symfony2 project

I'm trying to implement some small project into symfony2.5,
when I have added the the configurations of the compass to my config file and installed all the needed packages (ruby,sass,compass) though when I'm trying to assetic:dump the css I get the following
Error Output:
Error: File to import not found or unreadable: compass.
Load path: /path/to/project/CoreBundle/Resources/public/css
on line 6 of /tmp/assetic_sassE4kCr8
if I remove the #import "compass"; I still get the same problem with the #import "compass/css3"; AND the #import "compass/utilities/sprites";
in my config.yml I get the assetic set like the following:
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles: [ FundCoreBundle ]
filters:
scss:
bin: "/usr/local/bin/sass"
compass:
bin: "/usr/local/bin/compass"
my css creation is as the following:
{% stylesheets
'#FundCoreBundle/Resources/public/css/style.scss'
filter='compass'
output='css/*.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
and my scss file is as the following
/* Compass utilities*/
// Use one CSS3 mixin instead of multiple vendor prefixes.
// #import "compass/support";
// #import "compass/reset";
#import "compass/css3";
#import "compass";
// See http://compass-style.org/help/tutorials/spriting/
#import "compass/utilities/sprites";
// Helps set up a vertical rhythm.
// #import "compass/typography/vertical_rhythm";
// Sass utilities
#import "helpers/variables";
#import "helpers/mixins";
// Vendors and external stylesheets
// #import "vendors/mmenu/jquery.mmenu";
#import "vendors/bootstrap/bootstrap";
// Base stuff
#import "base/typography";
#import "base/normalize";
#import "base/main";
what is the right way to import compass +ccs3 + sprites to the symfony project?

Categories