I'd like to have my stylus file accept variable input from grunt, loop the variable values, and output different themed css files.
Then I could easily switch themes like this. https://stackoverflow.com/a/7847009/55124
Is this possible? How would one set it up?
Right now I have grunt compiling stylus into my css. But, to generate a different theme, I have to manually change the value of my themeName variable in my mainCSS.stylus file and rebuild with grunt.
What do you think about this way:
There is a main.styl, that contains:
#import "variables";
//some other styles and imports
and there are some themes files:
themes/default.styl
themes/pretty-theme.styl
themes/very-pretty-theme.styl
using grunt-contrib-copy you can copy the file themes/default.styl to the variables.styl and compile stylus to the css styles, than you delete variables.styl and again copy themes/pretty-theme.styl to the variables.styl and compile and so on.
copy: {
default-theme: {
src: 'themes/default.styl',
dest: 'variables.styl',
},
pretty-theme: {
src: 'themes/pretty-theme.styl',
dest: 'variables.styl',
},
very-theme: {
src: 'themes/very-pretty-theme',
dest: 'variables.styl',
},
}
Related
I have looked at several stackoverflow posts and github issues, but can't find something that is working for me.
I have a custom font that I'm using for icons that I'm installing via npm. These are the files in my folder a-icons in node_modules:
a-icon.css
a-icon.eot,
a-icon.ttf,
a-icon.woff,
a-icon.svg
In my main stylesheet I've added:
#import '~a-icons/a-icon';
#font-face {
font-family: 'a-icon';
src: url('../../../node_modules/a-icons/a-icon.eot');
src:
url('../../../node_modules/a-icons/a-icon.ttf') format('truetype'),
url('../../../node_modules/a-icons/a-icon.woff') format('woff'),
url('../../../node_modules/a-icons/a-icon.svg') format('svg');
}
#import '~a-icons/a-icon' is specifically giving me an error saying that it can't find the .eot, .ttf, .woff, .svg
This is one of the errors:
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/assets/stylesheets/global-styles.scss
Module not found: Error: Can't resolve './a-icon.eot' in '/Users/rmadan/a-one/a-platform/src/assets/stylesheets'
resolve './a-icon.eot' in '/Users/rmadan/a-one/a-platform/src/assets/stylesheets'
using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets)
Field 'browser' doesn't contain a valid alias configuration
after using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets)
using description file: /Users/rmadan/a-one/a-platform/package.json (relative path: ./src/assets/stylesheets/a-icon.eot)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.js doesn't exist
as directory
/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot doesn't exist
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.ts]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot.js]
[/Users/rmadan/a-one/a-platform/src/assets/stylesheets/a-icon.eot]
# ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader/lib?{"ident":"postcss","sourceMap":false}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/assets/stylesheets/global-styles.scss 6:76081-76109
# ./src/assets/stylesheets/global-styles.scss
# multi ./src/assets/stylesheets/global-styles.scss ./node_modules/normalize.css/normalize.css
I'm using scss, but the font is in vanilla css.
I've also tried #import '../../../node_modules/a-icons/a-icon.css'; The icons show up as a square and I think that's because the font-family isn't recognized. So I added #font-face, but that it doesn't do anything.
I also tried changing angular-cli.json to include it in the assets and style:
"assets": [
"assets",
"assets/languages",
"assets/stylesheets",
"favicon.ico",
"environments/environment.values.js",
{
"glob": "a-icon.*",
"input": "../node_modules/a-icons",
"output": "./assets/a-icons"
}
"styles": [
"assets/stylesheets/global-styles.scss",
"../node_modules/normalize.css/normalize.css",
"../node_modules/a-icons/a-icon.css"
]
This doesn't do anything.
First, I advise you to create a single css file "fonts.css" in your node module, it will be simple to include a css file in your application rather than redefine the fonts and refer to N files (woff2, eot...ect), for example:
Your fonts.css:
#font-face {
font-family: 'a-icon';
src: url('a-icon.eot');
src:
url('a-icon.ttf') format('truetype'),
url('a-icon.woff') format('woff'),
url('a-icon.svg') format('svg');
}
Second, include the file "fonts.css" in your styles.css of your angular application as follows:
#import "~a-icons/fonts.css";
I have a similar solution that works fine, my node module contains a theme with fonts.
Why did you refer To a node module to get icons? The font is related to the theme of your application so it should be within your assets folder and then simply add: import the-name-font in your main stylesheet.
If you need to import external css files from node_modules, add their links in angular cli config file To import them in the assets folder and then import them in your main stylesheet from assets folder
Hope my response can help you
I am working on moving over from grunt-contrib-compass to grunt-sass. I am seeing that the libsass compiler is failing on some of the imports in the main.scss file, though.
Here is main.scss
#import "breakpoint";
#import "compass/css3";
#import "compass/css3/user-interface";
#import "compass/css3/transform";
#import "compass/utilities/general/clearfix";
And here is the error thrown when running the sass task:
file to import not found or unreadable: breakpoint
Current dir: example/styles/
Line 1 Column 9 example/styles/main.scss
Does anybody familiar with making the switch to libsass from compass know if there are equivalents for these imports that I could drop in as replacements?
You need to update the import path for breakpoint to point to where the _breakpoint.scss is located.
grunt-contrib-compass has an importPath option (e.g. importPath: '/bower_components',) which
Makes files under the specified folder findable by Sass's #import
directive
Since that was removed from your gruntfile, you should now use the full path to import it:
#import "/bower_components/breakpoint/breakpoint";
Edit: libsass has a similar option 'loadPath' which takes an array of paths to search for files to #import.
grunt.initConfig({
libsass: {
options: {
loadPath: ['my/load/path']
},
files: {[
{
expand: true,
cwd: 'my/src/dir',
src: ['**/*.scss'],
dest: 'dist',
ext: '.css'
}
]},
}});
Your new config for libsass will include
If you choose not to do that, you'll need to install breakpoint globally just like you did for compass.
gem "breakpoint", "~>2.4.0"
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
I created a mobile application with the yeoman mobile-generator.
Now I want to add font awesome. I tried this, but not really works in the compiling process. A small advice or experience would be great
Okay, it's really a bit unclear. Sorry.
The compiling process works, but console says 404 not founds for the fonts.
It's not really clear to me how is a good way to do this. Creating the CSS from the scss files, implemeted the .min.css in the index.html with "<-- build: ... -->" or something else?!
When I add this in my main .scss file the the fonts would not be found.
$fontAwesomePath: "../bower_components/font-awesome/fonts";
#import '../bower_components/font-awesome/scss/font-awesome.scss';
Grunt copies and renames the font files f.e. to:
5a6b8fb8.FontAwesome
Sounds like grunt rev https://github.com/cbas/grunt-rev is renaming your font file. Just look for something like this in your Gruntfile:
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= yeoman.dist %>/styles/fonts/*'
...
remove the fonts line and you should be okay.
Ok,
seems I could fixed this with the help of this answer.
Installed font awesome with bower:
bower install --save font-awesome
Then simply this line in the index.html fixed my problem.
<!-- build:css styles/vendor/fontawesome.css -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- endbuild -->
Thanks #OddEssay and #bpaul for our help!!
#importing the scss takes care of the CSS side of things, but I think you also need to move the assests to a location the browser can access them, so grunt-contrib-copy would do the job perfectly. So if your webroot is public Something like:
copy: {
main: {
files: [
{expand: true, cwd: '../bower_components/font-awesome/fonts', src: ['*.*'], dest: 'public/fonts'}
]
}
I'm trying to import a CSS stylesheet into a .sass file from a component. In this example, the component is bootstrap-select and the import looks like this:
#import 'bootstrap-select/bootstrap-select.css'
This builds successfully but the browser is unable to find the file, I receive the following error in the browser:
GET http://localhost:9000/styles/bootstrap-select/bootstrap-select.css 404 (Not Found)
Is there anything special I need to setup to have .css files included in builds?
In order to import the code of the file into your Sass file the imported file needs to have a .sass or .scss ending. If the file ends with .css the code will not be sucked in and it just is a normal CSS #import statement that creates an HTTP request.
Just copy the css file you want to import, change the file ending to .scss and #import that file. Sass will then suck in the code and replace the #import statement with it in your CSS file.
What Kahlil said; but I would propose using bootstrap-sass instead as it gives you a lot more flexibility when it comes to what you can/can't include. I'm using this in production and it's very good; you can completely tailor your build, including variables so that you can tweak the button colours, spacing and such. For example:
/*
|---------------------------------------------------------------------
| Only include the parts of Bootstrap that we are actually using.
|---------------------------------------------------------------------
*/
$navbar-margin-bottom: 0;
#import "../vendor/bootstrap-sass/lib/variables";
#import "../vendor/bootstrap-sass/lib/mixins";
#import "../vendor/bootstrap-sass/lib/normalize";
#import "../vendor/bootstrap-sass/lib/print";
#import "../vendor/bootstrap-sass/lib/scaffolding";
#import "../vendor/bootstrap-sass/lib/type";
// etc
Add it to your bower.json (bootstrap-sass) and use that instead.
There's a ruby gem which allows for the functionality described called sass-css-importer, which allows for the following syntax to be used to include files ending with .css from within .scss files:
#import "CSS:../../bower_components/alertify/themes/alertify.core";
#import "CSS:../../bower_components/alertify/themes/alertify.default";
#import "CSS:../../bower_components/normalize-css/normalize";
#import "../../../bower_components/bourbon/app/assets/stylesheets/_bourbon";
#import "../../../bower_components/neat/app/assets/stylesheets/_neat";
It can be added to a Gemfile like so:
source "http://rubygems.org"
gem "sass-css-importer"
And required in the Gruntfile:
sass:
options:
quiet: true
require: 'sass-css-importer'
static:
files: [
expand: true
cwd: 'source/styles'
src: ['*.scss']
dest: 'build/styles'
ext:
YMMV. Good luck!