I'm compiling my SCSS with gulp-scss. My styles.scss file looks like this:
#import "node_modules/bulma/sass/utilities/initial-variables";
#import "node_modules/bulma/bulma";
#import 'src/styles/navigation';
The second line of this code imports Bulma, the source code for which can be found here. This file imports some utilities, including some mixins I need.
Unfortunately when I try to use those mixins in my navigation.scss file:
#include desktop {
.navbar {
min-height: 135px;
}
}
I get the following error:
Worth noting that if I #import the mixins and variables file in navigation.scss directly, it works fine. What's going on here?
The problem was with my file names. They were not preceeded by an underscore, which appears to be the convention for the compiler to work properly. So src/styles/navigation.scss became src/styles/_navigation.scss. The import remained the same:
#import 'src/styles/navigation';
I will assume you use gulp-sass.
What I usually do is creating a path in the gulp file for better reference and also for letting know gulp I will be using these node resources in .scss files.
In this case I'm calling foundation and compass mixins modules in the include paths.
This is a task in the Gulfile.js
gulp.task('styles', function () {
gulp.src('src/scss/application.scss')
.pipe(sass({
includePaths: [
'node_modules/foundation-sites/scss',
'node_modules/compass-mixins/lib'
],
outputStyle: 'compressed'
}).on('error', sass.logError))
.pipe(gulp.dest('./public/css/'))
});
Then in your main .scss or where you want to place the import for those files you can just simply add:
#import 'compass';
#import 'foundation';
#include foundation-everything;
Here I call the compass file inside this node module path I specified in the gulp file, and also the foundation.scss (which imports a lot of other scss files).
Then once foundation is availabe I initialize all the mixins.
So summing up:
Possible solutons:
1: Check if this gulpfile definition with include path solves you routes errors.
2: check if the modules you are importing don't have a trigger mixin to enable them, such as foundation has his "foundation-everything"
Hope this helps.
I have next situation.
I have core.scss file:
#import "fonts";
#import "custom_mixins";
#import "variables";
#import "base";
where I generally add all subfiles into one central.
Next with compass and gulp I compile this file:
gulp.task('compass', function() {
return gulp.src('css/src/core.scss')
.pipe(compass({
config_file: './config.rb',
css: 'css/dist',
sass: 'css/src'
}));
});
It works fine but here I have the problem. Each time I change for example one line in _variables.scss, this task recompiles all files to core.css file. It takes near 2s for one line change. Is there any way I can cache unchaged scss subfiles so that they wont be recompiled each time?
I know there is an option in Gulp using gulp-remember plugin to remember compiled unchanged css files before concatenating them. But here I have one css file created from one scss file...
I recommend you to use gulp-sass instead of compass. Compass is just a bunch of mixins and functions you can yourself integrate in your files without the need to compass dependency. Gulp-sass is faster than the sass compilation with Ruby because is using libsass, a port of Sass in C++.
First you'll need to install node-sass with NPM or Yarn and call it in your Gulpfile.
var gulp = require('gulp');
var sass = require('gulp-sass');
You'll change your compass task to the sass version:
gulp.task('sass', function() {
return gulp.src('css/src/core.scss')
.pipe(sass({
outputStyle: 'nested'
}).on('error', sass.logError))
.pipe(gulp.dest('css/dist')
});
Try, your compilation will probably be faster. You can change sass options, add sourcemaps and others options.
I am using the command line sass --watch style.scss --style compressed to output a compressed CSS version of my SCSS style sheet.
Is there a way to output one expanded and one compressed CSS file, calling them respectively style.css and style.min.css?
I read the documentation without finding any information on this.
Your best bet would be to go with a task manager like Gulp or Grunt. Then you can specify two separate task for SASS and run grunt compile (using the Grunt example below). One for compressed and one for expanded. Otherwise I would just run another command on the terminal if you don't wan to mess with the config.
sass: {
expanded: {
options: {
style: 'expanded'
},
files: {
'css-expanded/*.css': 'sass/*.scss'
}
}
compressed: {
options: {
style: 'compressed'
}
files: {
'css-compressed/*.min.css': 'sass/*.scss'
}
}
grunt.registerTask('compile': ['sass:expanded', 'sass:compressed']);
You could run two terminal windows, each with one watcher in it. In one you would run
sass --watch style.scss:style.css --style nested
and in the other you would run
sass --watch style.scss:style.min.css --style compressed
I am unaware of a method to do this in one line.
Here is my current (the relevant portion) gulpfile:
gulp.task('styles', function() {
return gulp.src('app/stylesheets/main.scss')
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulpif(production, cssmin()))
.pipe(gulp.dest('public/css'))
.pipe(livereload());
});
With following main.scss:
#import "normalize";
#import "foundation";
here's the folder structure of the app/stylesheets folder:
-- app -- stylesheets ---foundation.scss
|-normalize.scss
|-main.scss
|-foundation-------_functions.scss
|-_settings.scss
|-_components/
The resulting main.css file after gulp processing ends up containing only the normalize.scss styles and what looks like the _tables.scss and _visibility.scss components.
I have tried using includePaths with gulp-sass and that didn't compile anything at all.
Also, importing the css rather than scss in the main.scss file works just fine, but I want to change the row-width setting to 100%, so I'd like to use the scss files.
All foundation files were left as is. Please help me understand why not all the components are importing! Thank you!
Check the foundation.scss file, you need to initialize the mixins to be available, either by calling them one by one or calling them all with the provided fun by foundation:
#import 'foundation';
#include foundation-everything;
Hope this helps.
I have installed font-awesome 4.0.3 icons using npm install.
If I need to use it from node-modules how should I use it in html file?
If I need to edit the less file do I need to edit it in node-modules?
Install as npm install font-awesome --save-dev
In your development less file, you can either import the whole font awesome less using #import "node_modules/font-awesome/less/font-awesome.less", or look in that file and import just the components that you need. I think this is the minimum for basic icons:
/* adjust path as needed */
#fa_path: "../node_modules/font-awesome/less";
#import "#{fa_path}/variables.less";
#import "#{fa_path}/mixins.less";
#import "#{fa_path}/path.less";
#import "#{fa_path}/core.less";
#import "#{fa_path}/icons.less";
As a note, you still aren't going to save that many bytes by doing this. Either way, you're going to end up including between 2-3k lines of unminified CSS.
You'll also need to serve the fonts themselves from a folder called/fonts/ in your public directory. You could just copy them there with a simple gulp task, for example:
gulp.task('fonts', function() {
return gulp.src('node_modules/font-awesome/fonts/*')
.pipe(gulp.dest('public/fonts'))
})
You have to set the proper font path. e.g.
my-style.scss
$fa-font-path:"../node_modules/font-awesome/fonts";
#import "../node_modules/font-awesome/scss/font-awesome";
.icon-user {
#extend .fa;
#extend .fa-user;
}
Add the below to your .css stylesheet.
/* You can add global styles to this file, and also import other style files */
#import url('../node_modules/font-awesome/css/font-awesome.min.css');
You will need to copy the files as part of your build process. For example, you can use a npm postinstall script to copy the files to the correct directory:
"postinstall": "cp -R node_modules/font-awesome/fonts ./public/"
For some build tools, there are preexisting font-awesome packages. For example, webpack has font-awesome-webpack which lets you simple require('font-awesome-webpack').
Using webpack and scss:
Install font-awesome using npm (using the setup instructions on https://fontawesome.com/how-to-use)
npm install #fortawesome/fontawesome-free
Next, using the copy-webpack-plugin, copy the webfonts folder from node_modules to your dist folder during your webpack build process. (https://github.com/webpack-contrib/copy-webpack-plugin)
npm install copy-webpack-plugin
In webpack.config.js, configure copy-webpack-plugin. NOTE: The default webpack 4 dist folder is "dist", so we are copying the webfonts folder from node_modules to the dist folder.
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyWebpackPlugin([
{ from: './node_modules/#fortawesome/fontawesome-free/webfonts', to: './webfonts'}
])
]
}
Lastly, in your main.scss file, tell fontawesome where the webfonts folder has been copied to and import the SCSS files you want from node_modules.
$fa-font-path: "/webfonts"; // destination folder in dist
//Adapt the path to be relative to your main.scss file
#import "../node_modules/#fortawesome/fontawesome-free/scss/fontawesome";
//Include at least one of the below, depending on what icons you want.
//Adapt the path to be relative to your main.scss file
#import "../node_modules/#fortawesome/fontawesome-free/scss/brands";
#import "../node_modules/#fortawesome/fontawesome-free/scss/regular";
#import "../node_modules/#fortawesome/fontawesome-free/scss/solid";
#import "../node_modules/#fortawesome/fontawesome-free/scss/v4-shims"; // if you also want to use `fa v4` like: `fa fa-address-book-o`
and apply the following font-family to a desired region(s) in your html document where you want to use the fontawesome icons.
Example:
body {
font-family: 'Font Awesome 5 Free'; // if you use fa v5 (regular/solid)
// font-family: 'Font Awesome 5 Brands'; // if you use fa v5 (brands)
}
With expressjs, public it:
app.use('/stylesheets/fontawesome', express.static(__dirname + '/node_modules/#fortawesome/fontawesome-free/'));
And you can see it at: yourdomain.com/stylesheets/fontawesome/css/all.min.css
You could add it between your <head></head> tag like so:
<head>
<link href="./node_modules/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">
</head>
Or whatever your path to your node_modules is.
Edit (2017-06-26) - Disclaimer: THERE ARE BETTER ANSWERS. PLEASE DO NOT USE THIS METHOD. At the time of this original answer, good tools weren't as prevalent. With current build tools such as webpack or browserify, it probably doesn't make sense to use this answer. I can delete it, but I think it's important to highlight the various options one has and the possible dos and do nots.
Since I'm currently learning node js, I also encountered this problem. All I did was, first of all, install the font-awesome using npm
npm install font-awesome --save-dev
after that, I set a static folder for the css and fonts:
app.use('/fa', express.static(__dirname + '/node_modules/font-awesome/css'));
app.use('/fonts', express.static(__dirname + '/node_modules/font-awesome/fonts'));
and in html:
<link href="/fa/font-awesome.css" rel="stylesheet" type="text/css">
and it works fine!
I came upon this question having a similar problem and thought I would share another solution:
If you are creating a Javascript application, font awesome icons can also be referenced directly through Javascript:
First, do the steps in this guide:
npm install #fortawesome/fontawesome-svg-core
Then inside your javascript:
import { library, icon } from '#fortawesome/fontawesome-svg-core'
import { faStroopwafel } from '#fortawesome/free-solid-svg-icons'
library.add(faStroopwafel)
const fontIcon= icon({ prefix: 'fas', iconName: 'stroopwafel' })
After the above steps, you can insert the icon inside an HTML node with:
htmlNode.appendChild(fontIcon.node[0]);
You can also access the HTML string representing the icon with:
fontIcon.html
If you're using npm you could use Gulp.js a build tool to build your Font Awesome packages from SCSS or LESS. This example will compile the code from SCSS.
Install Gulp.js v4 locally and CLI V2 globally.
Install a plugin called gulp-sass using npm.
Create a main.scss file in your public folder and use this code:
$fa-font-path: "../webfonts";
#import "fontawesome/fontawesome";
#import "fontawesome/brands";
#import "fontawesome/regular";
#import "fontawesome/solid";
#import "fontawesome/v4-shims";
Create a gulpfile.js in your app directory and copy this.
const { src, dest, series, parallel } = require('gulp');
const sass = require('gulp-sass');
const fs = require('fs');
function copyFontAwesomeSCSS() {
return src('node_modules/#fortawesome/fontawesome-free/scss/*.scss')
.pipe(dest('public/scss/fontawesome'));
}
function copyFontAwesomeFonts() {
return src('node_modules/#fortawesome/fontawesome-free/webfonts/*')
.pipe(dest('public/dist/webfonts'));
}
function compileSCSS() {
return src('./public/scss/theme.scss')
.pipe(sass()).pipe(dest('public/css'));
}
// Series completes tasks sequentially and parallel completes them asynchronously
exports.build = parallel(
copyFontAwesomeFonts,
series(copyFontAwesomeSCSS, compileSCSS)
);
Run 'gulp build' in your command line and watch the magic.
SASS modules version
Soon, using #import in sass will be depreciated. SASS modules configuration works using #use instead.
#use "../node_modules/font-awesome/scss/font-awesome" with (
$fa-font-path: "../icons"
);
.icon-user {
#extend .fa;
#extend .fa-user;
}