I am trying to load font awesome using npm package manager and webpack in laravel project.
I tried many solution with/without $fa-font-path but none of them are working.
I tried:
$fa-font-path: "~#fortawesome/fontawesome-free/webfonts/";
#import '~#fortawesome/fontawesome-free/scss/fontawesome.scss';
#import '~#fortawesome/fontawesome-free/scss/solid.scss';
#import '~#fortawesome/fontawesome-free/scss/brands.scss';
#import "~#fortawesome";
with/without ~ sign too.
Each time font files are generated on the public/fonts/vendor/#fortawesome/fontawesome-free/webfonts/
It seems like it is considering default font path: $fa-font-path: "~#fortawesome/fontawesome-free/webfonts";
And the other issue is that it always look for /css/~#fortawesome/fontawesome-free/webfonts/fa-solid-900.woff this path. I dont know why it is adding ~ in css. I belive its $fa-font-path set inside fontawesome _variable library. While the generated directory is #fortawesome without ~
So I need to fix two issues here:
1) Fix the path in laravel mix webpack
2) Remove prefix ~ sign from path and make $fa-font-path work
In /resources/sass/app.scss add...
// 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';
You don't need: $fa-font-path. The ~ references the /node_modules directory.
Related
I'm working on a theme and plugin that share components. In my theme I have a scss file and in this I want to import a main.scss file from my plugin. This is the situation:
Plugin main.scss
#import "slick";
#import "slick_theme";
#import "~bootstrap/scss/bootstrap";
#import "~aos/dist/aos.css";
#import "../../../my-directory/**/*.scss";
Theme main.scss
#import "../../plugins/my-plugin/assets/src/scss/main";
II can't compile the main.scss of my theme because it can't resolve the url of node_modules and the directory with wildcards.
Any ideas?
(A) Easiest (and fastest!) way: Use full relative path!
As SASS don't support the wild cards in SASS files using #-rules: just remove wild cards and write full relative path to node-modules like #import '../../complete/relative/path/to/node/module/dir/file.scss' ;-)
(B) ALTERNATIVE: Set includePath
Set node directory as includePath for your project. As I don't know the compiler you use here are the information how to do in original SASS (but 'includePath' variable is almost the same):
https://sass-lang.com/documentation/js-api#includepaths
In that case you are able to #import only by using the filename.
Additional notes:
In SASS rule #import does NOT support mulitple includes at all. Means: in a SASS file #import '*.scss' (as you try in your example by using wildcard * in filename) will not work at all. You ALLWAYS need to specify a concrete single file: #import 'concreteFile.scss'.
In SASS you can remove the suffix .scss from filenames. As this #import path/to/filename'` works as well.
I'm starting to work on a large application styling files. As Bootstrap 4 offers SASS files, I decided to follow that path.
I have built the following files structure:
theme.scss: general definitios for the theme like colors and fonts. Today there is just one but there could be more in the future.
global.scss: includes Bootstrap, some Bootstrap overrides and application componentes -i.e. a field with its label as part of the top border.
site.scss: general application styles.
additional page-specific SCSS files. I.e.: login.scss.
The problem I'm having is that global.scss -the one that imports Bootstrap- is then imported by site.scss as well as other files like page-specific SCSS files. So, Bootstrap styles end up in more than one compiled CSS. Compiled CSS files are what the application actually references.
I've previously used LESS and I could solve this using #import (reference) "bootstrap" instead of just plain #import "bootstrap". With SASS I haven't been able to find any solution to this problem without modifying Bootstrap core files.
Is there any other recommended way to organize the files and avoid this problem? Am I missing something or doing anything wrong?
Here are the files contents (they are large files but I'm posting only enough contents to show the problem I'm having):
theme.scss
$my-primary-color: #04459a;
global.scss
#import "../theme.scss";
$primary: $my-primary-color;
#import "../../third-party/bootstrap/scss/bootstrap.scss";
%field{
// [...]
}
site.scss
#import "global.scss";
div.field {
#extend %field;
}
// [...]
login.scss (or many other)
#import "global.scss";
// [...]
In the application I'm referencing site.css and login.css (in the loign page, of course) and both of them include Bootstrap styles.
I've built something that works for me, not sure if it's the best solution or which drawbacks it has, though.
I took some ideas from this article: My favored SCSS setup with Bootstrap 4. Here's what I've built:
First I created two SASS files for importing Bootstrap (similar to what the article does with bootstrap/_config.scss but splitted):
bootstrap/_sass-componentes.scss
#import "../../terceros/bootstrap/scss/_functions.scss";
#import "../../terceros/bootstrap/scss/_variables";
#import "../../terceros/bootstrap/scss/_mixins";
bootstrap/_config.scss
#import "_sass-componentes.scss";
// Every other bootstrap file I want to include:
#import "../../terceros/bootstrap/scss/_root";
#import "../../terceros/bootstrap/scss/_reboot";
#import "../../terceros/bootstrap/scss/_type";
// [...]
#import "../../terceros/bootstrap/scss/_utilities";
#import "../../terceros/bootstrap/scss/_print";
Then in global.scss I changed the bootstrap.scss import line to import only bootstrap/_sass-componentes.scss
Finally, in site.scss I included global.scss (such as it was before) and then full Bootstrap files trough bootstrap/_config.scss. **
** After importing _config.scss I also import my Bootstrap customizations. For doing them I followed the recomendation of the linked article although they do not apply directly to my own question.
index.jsx
import 'react-date-range/dist/styles.css'
import 'react-date-range/dist/theme/default.css'
I deployed a Rails app(Rails + React.js) on Heroku.
But styles of react-date-range component are not loaded on Heroku even it is working on local.
What is the way to fix this issue?
Obviously, you're using Webpack and you have configs for loading CSS, instead of using index.jsx add these two pre-compiled CSS into your root of CSS by this:
#import url("react-date-range/dist/styles.css");
#import url("react-date-range/dist/theme/default.css");
If the url function doesn't work try without it:
#import "react-date-range/dist/styles.css";
#import "react-date-range/dist/theme/default.css";
If these two guys aren't in your final bundle file, simply, use relative path, because it is a little hard to add Webpack configuration that Webpack understand node_modules absolute path of libraries inside css-loader.
#import "../node_modules/react-date-range/dist/styles.css";
#import "../node_modules/react-date-range/dist/theme/default.css";
I am having a problem working with font awesome 5 and sass I have followed the instructions on their webpage to get started but i can seem to get the icons to appear i have a directory
C:\Users\myName\Learn\public\scss\vendors\font-awesome\fontawesome.scss
in my public\scss folder i have a home.scss file where i import fontawesome.scss as follows
#import "vendors/font-awesome/fontawesome.scss";
when i compile the code it shows the fontawesome classes and stuff when i look on the webpage there are no fonts just big white square further research tells me its not loading the webfonts i placed the webfonts folder inside my project in this directory
C:\Users\myName\Learn\public/webfonts
and in the _variables.scss file i modified the fa-path to point to
"../webfonts"; but this nothing works I would really appreciate any insight that would help me solve this problem because following the instructions online for font awesome 5 with sass doesn't seem to be working for me.
Your folder structure is a bit different, but it should give you a general idea.
// In your main scss file
#import "FontAwesome/fontawesome.scss";
#import "FontAwesome/fa-light.scss";
// In your font awesome variables
$fa-font-path: "../WebFonts" !default;
// Folder structure
/stylesheets/mycompiled.css
// Webfont location
/stylesheets/WebFonts
Its possible that you didn't import either a Light/Regular/Solid part, as everything else seems fine.
If still having issues, you can specify an absolute path (assuming /public is your root)
$fa-font-path: "/WebFonts" !default;
Using absolute path, mine works as
$fa-font-path: "/stylesheets/WebFonts" !default;
As some of the packages are now deprecated I've compiled what I needed to do in order to make FontAwesome 5 Free work with React and Typescript.
Here is how I've solved, considering the solutions posted by (#alexsasharegan and #cchamberlain):
My architecture:
React 16.7.0
Typescript 3.3.1
Bulma 0.7.2 (similar to bootstrap)
FontAwesome 5.7.1
1) Package.json (FontAwesome packages I've used. You can switch to FAR or FAL)
(...)
"dependencies": {
"#fortawesome/fontawesome-free": "^5.7.1",
"#fortawesome/free-solid-svg-icons": "^5.7.1",
};
(...)
2) In your webpack.config (very essential):
(...)
{
test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
use: "url-loader?limit=100000"
}
(...)
3) In your main scss file :
$fa-font-path : "~#fortawesome/fontawesome-free/webfonts";
#import "./node_modules/#fortawesome/fontawesome-free/scss/fontawesome.scss";
#import "./node_modules/#fortawesome/fontawesome-free/scss/solid.scss";
4) That will allow you to use Font Awesome like this:
<i className="fas fa-check" />
Just in time: if you want to use FontAwesome as a component, look at their documentation that well explains how to import the JS files to put it to work.
https://fontawesome.com/how-to-use/on-the-web/using-with/react
Hope it helps and I've posted here because since last message some packages changed.
In Java8_31 I imported different CSS files like that in my main.css:
#import "style/common/test1.css";
#import "style/common/test2.css";
All files were in the package style/common and it worked great.
Now with the build Java8_40 I did the same thing, but I get the following error message:
Could not find stylesheet:
file:/mypath/../style/common/style/common/test2.css
com.sun.javafx.css.parser.CSSParser handleImport
All my styles from the CSS file test1.css are working. What I was curious about was the fact that my path style/common is showing up two times.
So I tried to change my imports to the following:
#import "style/common/test1.css";
#import "test2.css";
With these imports, both styles of the file test1 and the file test2 are working. But both files are still in the same package.
Whats happening here? Is there a known issue about the #import and probably a problem in the CSSParser?
It actually is a known issue:
https://javafx-jira.kenai.com/browse/RT-40346
There is a temporary fix available and the issue should be fixed in the next build Java8_u60.
The temporary fix can be made in the CSSParser class. Link to the git diff:
http://hg.openjdk.java.net/openjfx/8u-dev/rt/rev/839912277bf0
If you dont want to try the fix or wait for u60, just add all css files to the same folder and import it like that (temporary solution!):
#import "css/test1.css";
#import "test2.css";
#import "test3.css";
#import "testX.css";
Just contributing to the discussion (not directly to your question):
You don't have to explicitly set the full .css file path. All you need is to specify the .css folder and the file name:
Original path:
#import "css/nodes/path/CssFile.css";
Full path without folder specification:
#import "../../path/CssFile.css";
Both work the same. Notice that, in the second example, "../" refers to the path level, not the specific folder name.
So in your case, that would be
#import "../common/test1.css";