I have installed foundation 5 with bower. by compass watch there is no problem to compile foundation files but when i want to use grunt-sass plugin, i see this error:
Running "sass:development" (sass) task
Warning: C:\wamp\www\nik\myapp/scss/app.scss:2: error: file to import not found or unreadable: "foundation"
Use --force to continue.
Aborted due to warnings.
Line 2 of app.scss is #import "foundation".
And grunt-sass in my Gruntfile.js:
sass: {
development: {
options: {
outputStyle: 'nested'
},
files: {
'.css/development/style.css': ['scss/app.scss', 'scss/style.scss']
}
},
production: {
options: {
outputStyle: 'compressed'
},
files: {
'.css/development/style.css': ['scss/app.scss', 'scss/style.scss']
}
}
I also tested this solution but it had no affection.
Just adding --libsass for installing foundation in command line, will cause installing foundation that is compatible with grunt:
foundation new A_PROJECT_NAME --libsass
Subsequently in grunt (after installing grunt-sass) :
sass: {
development: {
options: {
outputStyle: 'nested',
// Adding foundation source files, so we can #import them.
includePaths: ['bower_components/foundation/scss']
},
files: {
'css/style.css': ['path/to/styles/app.scss']
}
}
}
Hint: you can import your own style.scss in app.scss last line.
Related
I decided to remove node-sass from my gatsby project and use sass instead. I followed what is mentioned here for v3. I removed node-sass and now I have these versions in my package.json:
"gatsby-plugin-sass": "3.1.0",
"sass": "1.32.5",
I need to be able to write some #use or #import rules ONCE for global variables/mixins/functions so I can use them in all my scss files and so I won't have to repeat the same rules over and over again.
With node-sass something like this worked:
{
resolve: `gatsby-plugin-sass`,
options: {
includePaths: [`${__dirname}/src/styles`],
data: `#import "globals.scss";`,
},
},
After the upgrade, the includePaths attribute does work but the data does not and I get errors from my scss files about "missing" variables:
{
resolve: `gatsby-plugin-sass`,
options: {
sassOptions: {
includePaths: [`${__dirname}/src/styles`],
data: `#use 'globals' as *;`,
},
},
},
If I insert the rule #use 'globals' as *; in each scss file the errors disappear and everything works as expected but I don't want to insert this line and modify all my sass files.
I am pretty sure that the issue has to do with sass-loader and this statement (documentation) but I can't figure out how to make it work and why it worked before:
ℹ️ Options such as data and file are unavailable and will be ignored.
According to the changelog, data option has been renamed to prependData and then removed in favor of additionalData. So:
{
resolve: `gatsby-plugin-sass`,
options: {
additionalData: `#use 'globals' as *;`,
sassOptions: {
includePaths: [`${__dirname}/src/styles`],
},
},
},
I find Web Essentials autoprefixer not auto enough - I need to manually say it to add prefixes. Also it doesn't offer me prefixes when I'm writing .less or .scss.
Is there any extension or option to make it automatically add prefixes on css compilation from .less or .scss stage?
I've tried Web Compiler extension, but it doesn't support prefixing for sass, and says that it supports prefixing for less, but I've tried enabling autoprefix in compilerconfig.json while writing .less and it didn't add anything.
Is there something for visual studio? Or maybe I should dump it and use some editor + gulp?
I'm sure there will be an extension out there but it isn't too much work to create a Grunt/Gulp file to do your compiling for you. Task Runner Explorer will then manage the running of the file. Writing your own will give you the control and the flexibility that an extension will not.
Here is a sample using Grunt, taken from my post on the subject Getting started with Grunt, SASS and Task Runner Explorer
module.exports = function (grunt) {
'use strict';
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Sass
sass: {
options: {
sourceMap: true, // Create source map
outputStyle: 'compressed' // Minify output
},
dist: {
files: [
{
expand: true, // Recursive
cwd: "sass", // The startup directory
src: ["**/*.scss"], // Source files
dest: "stylesheets", // Destination
ext: ".css" // File extension
}
]
}
},
// Autoprefixer
autoprefixer: {
options: {
browsers: ['last 2 versions'],
map: true // Update source map (creates one if it can't find an existing map)
},
// Prefix all files
multiple_files: {
src: 'stylesheets/**/*.css'
},
},
// Watch
watch: {
css: {
files: ['sass/**/*.scss'],
tasks: ['sass', 'autoprefixer'],
options: {
spawn: false
}
}
}
});
grunt.registerTask('dev', ['watch']);
grunt.registerTask('prod', ['sass', 'autoprefixer']);
};
I am having issues importing compass, it's definitely installed (gem list confirms that), breakpoint and susy work fine but it doesn't like the compass import...
Error:
Error: File to import not found or unreadable: compass.
Load paths:
/Users/xx/dev/roomfully/listaroom-app
/Users/xx/.rvm/gems/ruby-2.1.1/gems/susy-2.2.2/sass
/Users/xx/.rvm/gems/ruby-2.1.1/gems/breakpoint-2.5.0/stylesheets
on line 1 of public/sass/app.scss
Use --trace for backtrace.
Gruntfile
module.exports = function(grunt) {
grunt.initConfig({
sass: {
dist: {
options: {
require: [
'susy',
'breakpoint',
'compass',
'compass-normalize'
]
},
files: {
'public/app.css': 'public/sass/app.scss'
}
}
},
watch: {
dist: {
files: 'public/sass/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
}
app.scss
#import 'compass';
#import 'compass-normalize';
#import 'breakpoint';
#import 'susy';
body {
display: none
}
There is an answer about this question, File to import not found or unreadable: compass, but before you check this link, maybe you can try to set sass option "compass: true", like this:
sass: {
options: {
compass: true
}
}
I solved this problem as below :-
There was a problem of path resolution by compass as all the paths mentioned are relative paths of the dependencies. Try to make the total path length smaller.
I had too much hierarchical folder structure as a result when the total path was resolved, it was greater than the allowed length.
try putting your folder(containing the whole project structure) directly in C drive.
To add on top of your answer #pramod, The error that blocks compass build is "File to import not found or unreadable: compass" is because NTFS limitation of 256 characters on path strings.
This also happened to me importing theme sass files about my app sources that must respect my project hierarchy.
I think that compass resolve the absolute path concatenating relative ones, wasting a lot of chars ("C:\a\b\c....\b\c\d" instead of "C:\a\b\c\d").
I would like to create a number of different themes for foundation for my Foundation web app (basically switch color schemes for different customers). I am still very new to Sass, libsass and grunt.
Basically what I want is something like: have two different _settings.scss files
_settingsA.css
$primary_color: #cc3333;
...
_settingsB.css
$primary_color: #3333cc;
...
And with those two files generate foundationA.css and foundationB.css.
I am currently using Foundation with Sass/Grunt.
I just found that the solution is editing Gruntfile.js and adding files to the "sass" task:
sass: {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'css/app.css': 'scss/app.scss',
'css/app2.css': 'scss/app2.scss',
'css/app3.css': 'scss/app3.scss'
}
}
}
I am trying to run my first project using grunt. i am stuck at the point when i try running grunt in the command line i get an error/warning like this:
Traviss-MacBook-Pro-2:GRUNT Travis$ grunt compass
>> Local Npm module "grunt-contrib-jshint" not found. Is it installed?
>> Local Npm module "grunt-contrib-qunit" not found. Is it installed?
Warning: Task "compass" not found. Use --force to continue.
Aborted due to warnings.
I installed both jshint and qunit so i am lost on what to do next for fixing this problem.
Any help would be greatly appreciated, thank you.
Here is my grunt.js file
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
qunit: {
files: ['test/**/*.html']
},
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
// options here to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint', 'qunit']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('test', ['jshint', 'qunit']);
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
};
You probably don't have the 'grunt-contrib' modules that use qunit and jshint in a grunt task form. You should be able to check with something like npm ls | grep contrib.
I'd suggest, within your project, running:
npm install grunt-contrib-jshint --save-dev
and
npm install grunt-contrib-qunit --save-dev
I would've expected some of the other grunt.loadNpmTasks()-specified modules to choke too, so I'm a little surprised more errors are not happening.
As for "Warning: Task "compass" not found", there is no 'compass' target in your gruntfile (as there is for qunit, watch, etc.), so that makes sense. You'll either want to add in a 'compass' task to do stuff under that name or specify another target to grunt on the command-line (or omit any specific target to execute your default ['jshint', 'qunit', 'concat', 'uglify'] tasks).