I'm trying to build my first Foundation 5 project, and am new to CSS frameworks. I've successfully created a Sass project using the Foundation CLI, and when I hit index.html in the browser it all looks fine with Foundation 5 styling.
My /scss folder has 2 files, _settings.scss and app.scss which is simply
#import "settings";
#import "foundation";
This is the order recommended on ZURB forums. At this point, I thought you could start amending _settings.scss to customise things, but every time I uncomment a line in the file I get
error scss/app.scss (Line 47 of scss/_settings.scss: Undefined variable: "$font-weight-normal".)
type warnings from Compass. Why are the global variables undefined?
From the docs, these basic Sass variables are held in the _global.scss partial. I've checked my project and they are indeed defined there - so why do we
#import "settings";
before we
#import "foundation";
?? Any help with getting up and running greatly appreciated. I've not touched any of the Foundation files held in bower_components, just trying to amend _settings.scss in the /scss directory (which seems to be what you are supposed to do.)
You need to uncomment global variable $font-weight-normal
It's in _settings.scss line 44
Related
Ok. So this is my first lLaravel project. And I got into an odd issue. I am trying to customize the authentication forms by using bootstrap and my own added SASS files (which then are converted into the main app.css). So here is what is the issue: in the app.scss file I have imported the SASS partials and other external resources:
// Fonts
#import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);
// Variables
#import "variables";
// Bootstrap
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
// ADDED Login
#import "login";
In this form, when the app.scss file is translated into the app.css, I receive an error "File to import not found or unreadable: node_modules/bootstrap-sass/assets/stylesheets/bootstrap.
on line 6 of resources/assets/sass/app.scss". Anyone has any idea on how to fix this, suggestions on how to manage my css and sass files? Thank you in advance for your time.
I found a quick fix, but I am not sure that it is the best one. I downloaded a bootstrap.min.css and added it in public/css/ . Then, in the app.scss I imported the bootstrap file "#import "bootstrap.min.css";". That turned out to be a fix so far.
Simply just add a ~ to beginning of the imported directory
#import "~node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
it should be like above.
I wanted to use Bootstrap 3 and Less together. Here is what I did:
installed Node.js
installed Less using npm
downloaded bootstrap source (in a different directory than my project's directory)
copied the entire '/less' subfolder to my project's working directory.
created my custom .less file (e.g. styles.less) and included the following:
#import '../less/bootstrap.less';
#import '../less/utilities.less';
compiled in the Node command prompt using: ' lessc styles.less > styles.css '
My question:
Do I now need to only include the compiled styles.css file with my project or do I have to include all the bootstrap components as well?
Also, is this workflow recommended? (I actually read something similar in a smashingmagazine.com article).
PS: Apologies in advance for this silly (I think) question.
Thanks!
If you used
#import "bootstrap.less";
..inside your main less file, then the bootstrap.less will be included during compiletime and will be inside your compiled styles.css.
After your styles.css has been compiled, you only need to include this file into your project.
PS. Also take a look inside your styles.css file, to see what has been compiled inside there. Or play around yourself/experiment. For example, create 2 different less files, #import them inside your main.less, compile and see what happens.
I used https://github.com/Swiip/generator-gulp-angular to boilerplate my angularjs application.
I discover bootswatch theme flatly and want to use it and downloaded from [http://bootswatch.com/flatly/][2] two files, _variables.scss and _bootswatch.scss.
I added these two files to my vendor.scss
$icon-font-path: "../../bower_components/bootstrap-sass-official/assets/fonts/bootstrap/";
#import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
#import "flatly/variables";
#import "flatly/bootswatch";
and with gulp serve, I build my application and on console it shows me.
project developer$ gulp serve
[21:28:41] Using gulpfile /Volumes/Developer/angularjs/project/gulpfile.js
[21:28:41] Starting 'styles'...
[21:28:42] gulp-inject 2 files into index.scss.
stream.js:94
throw er; // Unhandled stream error in pipe.
^
Error: /Volumes/Developer/angularjs/project/src/app/flatly/_bootswatch.scss:16: error: unbound variable $navbar-default-bg
[1]: https://github.com/Swiip/generator-gulp-angular
[2]: http://bootswatch.com/flatly/
Why unbound variable $navbar-default-bg but the $navbar-default-bg exists in _variables.scss file.
$navbar-default-bg: $brand-primary;
My project structure:
Import the _variables.scss file at the beginning of your custom index.scss:
#import '../../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap/variables';
Another way around could be following these instructions >> https://github.com/Swiip/generator-gulp-angular/issues/379. I haven't tried this, though.
Try importing in this order variables, bootstrap, bootswatch as per
https://github.com/thomaspark/bootswatch/blob/gh-pages/global/build.scss
#import "flatly/variables";
#import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
#import "flatly/bootswatch";
The boilerplate attempts to compile all .scss files in the src folder (When it should ignore scss files starting with _).
Moving flaty outside of /src makes it behave eg
#import "../../flatly/variables";
#import '../../bower_components/bootstrap-sass-official/assets/stylesheets/bootstrap';
#import "../../flatly/bootswatch";
I have asked to clean up the LESS library and style file referenced in the head section of the application for redundancy and decreasing load time. The style file is basically style.less file and it is containing all other less files, I need to come up with single CSS file that could be style.css so everything is fine like I am getting the CSS output as style.css but there are a couple of files which are not compiling and changing in CSS. Below is a preview of style.less with other imported less files.
content of style.less
#import url('variables.less');
#import url('mixins.less');
#import url('base.less');
#import url('kendo.less');
#import url('header.less');
#import url('navigation.less');
#import url('lists.less');
#import url('treeview.less');
Where that variables.less and mixins.less are not compiling in CSS I don't know what is missing, there are nested rules applied in them may be they are making errors as I heard that there is a need for a config file to process nested variables and mixins when imported and used for plain CSS. I am unable to find the solutions to this, your help will be highly appreciated. Many thanks.
Here are my settings for the Web Essentials LESS Compiler:
OPTIONS > WEB ESSENTIALS > LESS
Auto-compile dependent files on save: TRUE
Compile files on build: TRUE
Compile files on save: TRUE
Create source map files: TRUE
Custom output directory: _PATH_TO_OUTPUT_YOUR_ONE_CSS_FILE
Don't save raw compilation output: FALSE
Process source maps: TRUE
Strict Math: FALSE
Show Preview Pane: TRUE
ALL of your LESS files except the main import LESS file should be prefixed with "_". So for example:
_base.less
_variables.less
style.less (holds the imports for base and variables).
Make sure you are using Web Essentials version 2.5. There was an error in the version after 2.5 that mucked up the precompiler. I don't know if they have updated with fixes yet.
I am using bootstrap with Meteor, and importing the bootstrap.less files, which is installed in the public folder, through an import command in main.less:
#import "public/bower_components/bootstrap/less/bootstrap.less";
Below it, I can start using the bootstrap mixins such as .clearfix() and text-hide() and they compile fine.
However, when I want to abstract my own less code into a separate file apply.less and import that file back into main.less, which now looks like this:
#import "public/bower_components/bootstrap/less/bootstrap.less";
#import "apply.less";
I now gets an error
=> Errors prevented startup:
While building the application:
client/less/apply.less:10:2: Less compiler error: .clearfix is undefined
This is really strange. Is this an issue with Meteor?
Another thing I found out - if I put this empty mixin definition
.clearfix(){}
at the top of my apply.less file, things will compile fine again.
Has anyone come across this issue before and figured out a workaround?
Rename your second file as apply.lessimport and import it as:
#import "apply.lessimport";
Basically, the less package looks for every file in the directory tree with a ".less" extension and compiles it to CSS individually, regardless of whether the file is being imported by another file.
When it finds a file with a ".lessimport" extension, it adds it to the list of watched files, but does not actually compile or do anything with it.