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"
Related
I'm creating a vue.js web app, and I'd like to use SCSS. I've installed npm i node-sass sass-loader and I've created a vue.config.js at root level:
module.exports = {
css: {
loaderOptions: {
scss: {
prependData: `#import "#/style.scss";`,
},
},
},
};
All styles I have added in main.scss file and main.scss file are imported in style.scss file.
#import './color';
#import './mixin';
#import './break-point';
#import './common';
#import './form';
My issue is that my web app doesn't load any of the .scss files or styles imported via the main style.scss file. I am not getting any error in console.
I have also created separate .scss files for every pages and imported style.scss in particular page CSS show in below image:
Have you tried to import main style.scss file right inside of App.vue - in the end, like that (# - means src folder in your Vue project):
<style lang="scss" src="#/styles/style.scss"></style>
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'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',
},
}
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!