I'm trying to learn Laravel and I've run into an issue that I can't seem to figure out with Google Fonts and Sass.
I'm trying to load my font on app.scss with:
// Fonts
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;700&display=swap');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
But it compiles to app.css as:
#import url(https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;
700&display=swap);#charset "UTF-8";
If I manually correct app.css it works. But how do I get Sass or Laravel to compile it properly?
This is caused by a known bug in Webpack which appears to be still open.
Details here: https://github.com/webpack/webpack/issues/10873
I solved it by modifying it as follows:
original:
#import url ("https://fonts.googleapis.com/css2?family=Rubik:wght#400;700&display=swap");
modified:
#import url ("https://fonts.googleapis.com/css2?family=Rubik:400,700");
Related
I'm learning sass, and using the live sass compiler extension in vs code. I'm also using the live server extension to view it in the browser. I have a main scss file which compiles fine every time I save the file and shows the updated code in the live browser. However, when I modify the partial files (_vaiables.scss for example), the browser reloads with no css, just the html; then, I need to re-save main.scss so I can see those changes in _variables.scss. Is that how it usually works? It is kind of annoying having to save two different files to see changes on the screen. I'm pretty sure there is a better way.
Here is my main.scss
#import "abstracts/functions";
#import "abstracts/mixins";
#import "abstracts/variables";
#import "base/animations";
#import "base/base";
#import "base/typography";
#import "base/utilities";
#import "components/button";
#import "components/composition";
#import "components/feature-box";
#import "components/card";
#import "layout/header";
#import "layout/grid";
#import "pages/home"
Here is some of the settings.json file for live sass compiler extension.
"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".css",
"savePath": "/advanced-css-course/Natours/starter/css/sass-compiler"
}
],
Here is the link to css in html
<head>
<link rel="stylesheet" href="css/sass-compiler/main.css" />
</head>
Thanks in advance.
I ended up installing node-sass to compile the code
I using scss in my project to import scss files.
For example I have file with variables (that using everywhere in my project)
And I have desktop.scss for importing files into it
Like this
#import 'variables';
#import 'desktop/_style';
#import 'desktop/index';
#import 'desktop/step_1';
#import 'desktop/step_2';
#import 'desktop/step_3';
#import 'desktop/step_4';
According to this issue
Link
It will be deprecated.
But what I can use instead of it?
Any suggestions?
This issue is only about importing CSS into a SCSS file. From your code I assume, that you only use SCSS Files, so you won't have a problem with that in future.
I'm designing a site using Laravel Mix on local. I have lots of scss lifes in resources/assets/sass and through app.scss I combine them it looks just the way it's supposed to be on local using npm run watch and php artisan serve
But when I set the site up on a server, all the css classes are missing, therefore design doesn't implement itself on the website. For instance I have a class future-concerts which styles the element it suggests. So I check for .future-concerts inside public\css\app.css there is no such class. What might be causing this? Even just copying app.css file to the server doesn't work. It just deletes most of the lines I wrote.
app.scss file
// Fonts
#import url('https://fonts.googleapis.com/css?family=Abhaya+Libre|Mitr|Raleway');
// Variables
#import "variables";
#import "custom";
#import "directives";
// Bootstrap
#import "bootstrap.min";
#import "bootstrap-theme.min";
// Fotorama
#import "fotorama";
// Animate.css
#import "animate";
// Font Awesome
#import "font-awesome.min";
webpack.mix.js file:
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I'm trying to use font awesome v4.5.0 in my project. I'm compiling my CSS using LESS and I've got the following:
#import "bootstrap/bootstrap.less";
#import "minimal-devices/minimal-devices.less";
#import "angular-tour/angular-tour.less";
#import "font-awesome/font-awesome.less";
#import "my-fonts.less";
#import "my-base.less";
#import "my-media.less";
#import "sce-style.less";
I'm using GulpJS to create one large css file and this is in my gulpfile.js
gulp.task('less', function () {
gulp.src([DIRSOURCE + 'assets/less/sce.less'])
.pipe(less())
.pipe(minifyCSS())
.pipe(rename("style.css"))
.pipe(gulp.dest(DIRDEST + 'assets/css'));
});
When I load up my page I get this shown in the console:
Failed to decode downloaded font: http://localhost:8000/assets/fonts/fontawesome-webfont.woff2?v=4.5.0
(index):1 OTS parsing error: invalid version tag
I'm not sure what I'm doing wrong as In my project I have the directory font-awesome with the font-awesome.less file.
Anyone have any guidance on this?
Issue was linked to the path I had set to the font directory. I updated within variables.less on line 4 to #fa-font-path "../fonts"; or alternatively to avoid any of this hassle I could have uncommented line 7 and used the CDN below:
//#fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.5.0/fonts"; // for referencing Bootstrap CDN font files directly
I've been trying to split my less files up in to sections to make them easier to navigate, and want to import them all using one main file to compile them to css. my style.less file looks like this:
#import "reset";
#import "colors";
#import "grid";
#import "functions";
#import "headings";
#import "listings";
#import "content";
#import "buttons";
#import "layout";
#import "forms";
I'm using Winless to compile, and it says "Successfull Compile", but the resulting css file is completely blank. When I change my style.less file to only have one import, it imports that file no problem, so I know it's not a file directory/permissions problem. Any ideas? This is driving me mad. I love LESS, I don't want to have to do everything in one sheet.
I'm on a PC. Don't seem to have any trouble doing this at work on OSX, but I use Windows 7 at home and need something like Winless. I get the same results using less.js client side javascript file.
This is an old issue and it now works fine with less.js in v2.5.3.
#import "reset.less";
#import "grid.less";
#import "color.less";
#import "custom.less";
CDN reference below:
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
Just remember to put your:
<link rel="stylesheet/less" type="text/css" href="less/compiled.less"/>
before the less.js reference.
I think this was due to a bug in LESS.js, and has since been fixed. Additionally, I've now moved to SimpLESS on Windows, and CodeKit on OSX. Neither of these have the same issues.
Using less.js has given me issues. Like darylknight, I suggest an alternative. I present upon to thee WinLess