I'm french, sorry for my english, I have a problem with Jekyll
I installed gems: jekyll, jekyll-sass-converter
But Jekyll dont convers styles.scss to styles.css
I declared the styles on _includes/head.html:
<!-- CSS -->
<link rel="stylesheet" href="{{ site.baseurl }}css/styles.css">
Assets was declared on _config.yml:
sass:
sass_dir: _lib
style: compressed
styles.scss output
// Imports
#import "base";
#import "main";
_lib folder output
/base.scss
/main.scss
Github Project: https://github.com/micaelandre/micaelandre.github.io
Github Issue: https://github.com/micaelandre/micaelandre.github.io/issues/1
Website: https://micaelandre.github.io
Jekyll only convert sass files if the .scss starts with two lines of triple dashes, so in css/styles.scss:
---
---
// Imports
#import "base";
This will generate: css/styles.css.
Also note that you don't need to explicitely install the sass converter, as it is one of the jekyll gem dependency.
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
styles.scss
#import 'packages/bulma.sass';
bulma.sass
#charset "utf-8"
/*! bulma.io v0.6.1 | MIT License | github.com/jgthms/bulma */
#import "sass/utilities/_all"
#import "sass/base/_all"
#import "sass/elements/_all"
#import "sass/components/_all"
#import "sass/grid/_all"
#import "sass/layout/_all"
terminal
'Error: client/packages/bulma.sass.scss doesn\'t exist!
Is it possible to import SASS into a SCSS file? What is the best way to install bulma into a scss env.
I also tried #import 'packages/bulma' and get client/packages/bulma.scss doesn\'t exist!.
tl;dr can you try removing the .sass extension?
#import 'packages/bulma';
More detailed answer from this post:
The Sass #import directive extends the CSS #import rule so that it works with .scss and .sass files. It imports the file referenced and any variables or mixins that are defined in the imported file so they can be used in the main file.
#import "typography.scss";
Assuming there’s a file typography.scss in the current directory, the contents of typography.scss will replace the #import statement.
Sass makes it even simpler. If you forget to include the extension, it will look for a file with the same name and either a .scss or .sass extension.
#import "typography";
The statement above would find either typography.scss or typography.sass in the same directory as the file importing the typography styles.
#Hector is right, just wanted to add some other things.
What is valid is covered by the language docs https://sass-lang.com/documentation/file.SASS_REFERENCE.html#import so the double import might be a node-sass bug, but the extension behaviour is going to warn in the next version of Sass AFAIK. Libsass runs through a sass2scss library to transpile the "unsupported" old .sass to .scss.
Remove the leading _ from the imports, those aren't valid
use #import "../node_modules/bulma/bulma.sass"; instead of #import 'packages/bulma.sass';
It will not throw any error. For more information, you can go through this link
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 running a project where Symfony2 serves the api and back-end; I use bower to install my front-end dependencies, including Angularjs and Zurb Foundation. We're using Assetic––a Symfony2 bundle––to minify, uglify, pre-render and combine our assets. We're also using Sass (as .sass), compiled by Assetic.
I want to work with Foundation's _settings.scss and understand that Foundation needs to recompile itself whenever I change a variable. I've tried running compass watch path_to_file but that doesn't update my Foundation project.
As I understand it, a lot of people run foundation using Compass or gulp. I've read through several docs but am unsure how it relates to my particular case. One source suggests running compass init to start a project and that compass watch to update the project when I make changes, but that doesn't seem appropriate to do with Symfony2, but I may be wrong. Anyone got tips?
I'm using this foundation repo: https://github.com/zurb/bower-foundation,
but there's also this one: https://github.com/zurb/foundation-apps. The second repo seems more suited for people who are running a Foundation project with gulp, the foundation cli, or by running compass init when starting a project.
The answer is incredibly simple:
I use Assetic to compile my sass. It typically looks like this:
{% stylesheets
"#SiteBundle/Resources/public/vendor/foundation/scss/app.scss"
filter="compass" %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}"/>
{% endstylesheets %}
app.scss is a file I created because that seems to be how everyone works with foundation. app.scss then imports the foundation components I want as well as normalize.scss and _settings.scss. I don't have to run compass watch because Assetic is already compiling for me.
I might move my app.scss and _settings.scss out of my vendors directory to ensure I don't write over either when updating foundation. But at the moment here's what my app.scss looks like, for anyone interested:
#charset "UTF-8";
// Foundation by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source
// Import normalize and settings
#import "normalize.scss";
#import "foundation/settings";
// Make sure the charset is set appropriately
// Behold, here are all the Foundation components.
#import "foundation/components/grid";
// #import "foundation/components/accordion";
#import "foundation/components/alert-boxes";
#import "foundation/components/block-grid";
// #import "foundation/components/breadcrumbs";
#import "foundation/components/button-groups";
#import "foundation/components/buttons";
#import "foundation/components/clearing";
#import "foundation/components/dropdown";
#import "foundation/components/dropdown-buttons";
#import "foundation/components/flex-video";
#import "foundation/components/forms";
#import "foundation/components/icon-bar";
#import "foundation/components/inline-lists";
// #import "foundation/components/joyride";
#import "foundation/components/keystrokes";
#import "foundation/components/labels";
// #import "foundation/components/magellan";
// #import "foundation/components/orbit";
#import "foundation/components/pagination";
#import "foundation/components/panels";
// #import "foundation/components/pricing-tables";
#import "foundation/components/progress-bars";
#import "foundation/components/range-slider";
#import "foundation/components/reveal";
#import "foundation/components/side-nav";
#import "foundation/components/split-buttons";
#import "foundation/components/sub-nav";
#import "foundation/components/switches";
#import "foundation/components/tables";
#import "foundation/components/tabs";
#import "foundation/components/thumbs";
#import "foundation/components/tooltips";
#import "foundation/components/top-bar";
#import "foundation/components/type";
#import "foundation/components/offcanvas";
#import "foundation/components/visibility";
The already answered questions on this issue didn't solve my problem.
When I pull in the Font Awesome library with Bower and integrate the library directly in index.html or alternatively use the hosted version like in the following, the icons are displaying fine:
<link href="bower_components/fontawesome/css/font-awesome.css" rel="stylesheet" />
or
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
However, no icons are displayed when I am compiling font-awesome.less or font-awesome.css with Grunt (Please see the picture: The Bootstrap LESS which I import in base.less works fine!):
frontend.less:
#import "base.less";
#import "/bower_components/fontawesome/less/font-awesome.less";
//#import (less)"//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
Gruntfile.js (excerpt):
less: {
development: {
options: {
compress: true, // Minification
},
files: {
// Compile frontend.less into frontend.css
"./public/assets/css/frontend.min.css":"./app/assets/less/frontend.less",
// Compile backend.less into backend.css
"./public/assets/css/backend.min.css":"./app/assets/less/backend.less",
}
}
},
I would appreciate your advise how to import / compile font-awesome.less correctly with Grunt or if this is a Font Awesome bug.
According your Grundfile.js you will create the ./public/assets/css/frontend.min.css file for your compiled css. You should set #fa-font-path relative to that file. Because of "http://localhost/testing/bower_components/bootstrap/fonts/" works in your situation also #icon-font-path: "testing/bower_components/bootstrap/fonts/".
In you frontend.less:
#import "base.less";
#import "/bower_components/fontawesome/less/font-awesome.less";
#icon-font-path: "testing/bower_components/bootstrap/fonts/";
Alternatively copy the font files from /bower_components/bootstrap/fonts/ to /public/assets/fonts and set #icon-font-path: "../fonts" (the default already defined in "/bower_components/fontawesome/less/variables.less).
Notice that v4.2 of Font Awesome also allows you to set:
#fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.2.0/fonts"; // for referencing Bootstrap CDN font files directly