Having looked at, File to import not found or unreadable: susy, I was unable to get the answer.
My Partial gruntfile.js
sass: {
options: {
/** Only use include_paths if extracting elements from Node_Modules */
includePaths: ['node_modules/susy/sass']
}, //options
dist: {
options: {
outputStyle: 'expanded',
sourceMap: false,
require: 'susy'
},
files: {
'css/main.css': 'scss/main.scss'
}
}
}, // sass
My scss file
#import 'susy';
Did you ever get this to work?
I got mine to work using grunt-sass and susy like this:
sass: {
options: {
includePaths: ['node_modules/susy/sass'],
require: 'susy',
outputStyle: 'compressed',
sourceMap: true
},
build: {
files: {
'stylesheets/css/styles.min.css': 'stylesheets/scss/styles.scss'
}
}
},
And then I'm using #import susy in my styles.scss file.
Related
I am using grunt to compress my LESS files and I have partial success it's either in one line from the setting compress: true or it's not compressed from false and the optimization value set.
What I would like is one per line class without the comments.
.cssitem {stuff;}
.cssitem {stuff;}
.cssitem {stuff;}
My grunt file looks like this:
module.exports = function(grunt) {
require('jit-grunt')(grunt);
grunt.initConfig({
less: {
development: {
options: {
compress: false,
yuicompress: true,
optimization: 2
},
files: {
"css/style.css": "less/style.less" // destination file and source file
}
}
},
watch: {
styles: {
files: ['less/**/*.less'], // which files to watch
tasks: ['less'],
options: {
nospawn: true
}
}
}
});
grunt.registerTask('default', ['less', 'watch']);
grunt.loadNpmTasks('grunt-contrib-less');
};
I have installed bootstrap using sass, however my scss files are not compiling to the css folder.
I was able to install the bootstrap, using bower.
This is my gruntfile.js
/*jslint node: true */
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
loadPath: ['./bower_components/bootstrap-sass/assets/stylesheets']
},
dist: {
options: {
outputStyle: 'expanded',
sourceMap: false
},
files: {
'css/bootstrap.css' : 'stylesheets/_bootstrap.scss',
}
}
}, // sass
compass: {
dev: {
options: {
config: 'config.rb'
}
} // dev
}, //compass
watch: {
options: {
livereload: true,
dateFormat: function(time) {
grunt.log.writeln('The watch finished in ' + time + 'ms at ' + (new Date()).toString());
grunt.log.writeln('Waiting for more changes...');
} //date format function
}, //options
scripts: {
files: ['*.js']
}, // scripts
//Live Reload of SASS
sass: {
files: ['stylesheets/*.scss', 'stylesheets/bootstrap/*.scss'],
tasks: ['sass']
}, //sass
css: {
files: ['stylesheets/*.scss', 'stylesheets/bootstrap/*.scss'],
tasks: ['compass']
},
html: {
files: ['*.html']
}
}, //watch
postcss: {
options: {
processors: [
require('autoprefixer-core')({
browsers: 'last 2 versions'
})
]
}
}, //post css
jshint: {
options: {
reporter: require('jshint-stylish')
},
target: ['*.js', 'js/*.js']
} //jshint
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('build', ['sass']);
grunt.registerTask('default', ['build', 'watch', 'compass', 'jshint']);
}
I would like to know, what step I am missing, because I have followed the directory paths correctly. My config.rb file, I have changed the sass directory to stylesheets.
When I run, sudo grunt, no errors are found but the stylesheet is not compiling.
In SCSS, files starting with _ (underscore) are typically ignored. See: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#partials
This also applies to grunt-sass.
I'm attempting to use Dennis Becker's grunt-sass-globbing plug-in with libsass since libsass doesn't support sass-globbing. https://github.com/DennisBecker/grunt-sass-globbing
I've tried setting up a libsass project using the documentation that the developer has provided.
I'm having trouble figuring out exactly where files need to be placed and how imports should be called.
The below setup throws this error:
Running "sass_globbing:files" (sass_globbing) task
Running "sass:app" (sass) task
>> file to import not found or unreadable: layout/**/*
>> Current dir: /Users/dlahay/Documents/Workspaces/SusyLibsass/css/sass/
>> Line 3 Column 9 css/sass/main.scss
File structure:
css
|_ main.css
|_ sass
|_ layout
|_ _base.scss
|_ typography
|_ _base.scss
|_ _layoutMap.scss
|_ _typographyMap.scss
|_ main.scss
Gruntfile.js
grunt.initConfig({
sass_globbing: {
files: {
'css/sass/_layoutMap.scss': 'css/sass/layout/**/*.scss',
'css/sass/_typographyMap.scss': 'css/sass/typography/**/*.scss',
},
options: {
useSingleQuotes: false
}
},
// Grunt-sass
sass: {
app: {
files: [{
expand: true,
cwd: 'css/sass',
src: ['*.scss'],
dest: 'css',
ext: '.css'
}]
},
options: {
sourceMap: false,
outputStyle: 'nested',
imagePath: "../",
}
},
// Grunt-contrib-watch
watch: {
sass: {
files: ['css/sass/**/*'],
tasks: ['sass']
},
options: {
livereload: true,
spawn: false
}
},
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass-globbing');
grunt.registerTask('default', ['sass_globbing', 'sass', 'watch']);
main.scss:
#import "../../bower_components/susy/sass/susy";
#import "layout/**/*";
#import "typography/**/*";
I've also posted this question/issue on the grunt-sass-globbing repo.
Dennis Becker, the developer of grunt-sass-globbing helped me identify the two issues with my setup:
I didn't identify a target in the sass_globbing task in the Gruntfile:
sass_globbing: {
my_target: {
files: {
'css/sass/_layoutMap.scss': 'css/sass/layout/**/*.scss',
'css/sass/_typographyMap.scss': 'css/sass/typography/**/*.scss',
},
},
options: {
useSingleQuotes: false
}
},
My main.scss should have had the name of the map file in the #import:
#import "../../bower_components/susy/sass/susy";
#import "layoutMap";
#import "typographyMap";
Things are now working smoothly. Thanks, Dennis.
I have answered this on the GitHub repository website. It was just an issue with the Gruntfile.js configuration - thee was no target defined on the sass_globbing task.
Using grunt-ts on my project, here is my Gruntfile:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
ts: {
build: {
src: ['ts-src/**/*.ts'],
//compile using the requirejs module style
module: 'amd',
//write generated files to ts-out directory
outDir: '../js/ts-out',
amdloader: 'loader.js',
//generate a reference file
reference: 'reference.ts',
//generate .d.ts files
declaration: true,
options: {
comments: true, //preserves comments
target: 'es5' //emit ECMAScript5 JS
}
}
},
watch: {
files: ['<%= ts.build.src %>'],
tasks: ['ts']
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-ts');
grunt.registerTask('default', ['watch']);
}
This "works", but it is generating a loader.js file that incorrectly prepends the outDir value onto the entries in the file. This results in a path for each file that contains js/ts-out, twice.
Does the amdloader option have configuration options, where I can override this?
I suspect it should be :
outDir: '../js/ts-out',
amdloader: '../js/ts-out/loader.js',
See : https://github.com/grunt-ts/grunt-ts/blob/master/Gruntfile.js#L101-L117 i.e.:
amdloadersrc: {
test: true,
src: ['test/amdloader/ts/app/**/*.ts'],
html: ['test/amdloader/ts/app/**/*.html'],
reference: 'test/amdloader/ts/app/reference.ts',
outDir: 'test/amdloader/js/app',
amdloader: 'test/amdloader/js/app/loader.js',
// watch: 'test/amdloader/app'
},
amdloadertest: {
test: true,
src: ['test/amdloader/ts/test/**/*.ts'],
html: ['test/amdloader/ts/test/**/*.html'],
reference: 'test/amdloader/ts/test/reference.ts',
outDir: 'test/amdloader/js/test',
amdloader: 'test/amdloader/js/test/loader.js',
},
amdloader takes an absolute path to the generated JS location
Here is my workflow I have 20 scss files that are imported into one 'app.scss' see below
#import
"base/normalize",
"base/foundation/functions",
"base/settings",
"app/functions",
"app/mixins",
"app/components/icons",
etc
the SASS folder structure is organized 'SASS/base and SASS/base' root has one 'app.scss' file that imports everything
I compile compile and watch changes via 'Gruntfile.js' -- it looks something like this
sass: {
dist: {
options: {
includePaths: ['scss'],
imagesDir: 'assets/img',
cssDir: 'assets/css'
},
files: {
'assets/css/app.css': 'sass/app.scss'
}
}
},
watch: {
sass: {
files: 'sass/**/*.scss',
tasks: ['sass']
},
css: {
files: 'assets/**/*.css',
options: {
livereload: true
}
},
javascript: {
files: ['app/**/*.js', 'app/**/*.hbs'],
options: {
livereload: true
}
}
},
This is great for production but while in dev I would like to have different css files for debugging purposes..
is there a way of having multiple css files via Gruntfile and SASS for development without having to include 20 <link rel="stylesheet"... while in dev stage...
based on comment about using sourceMap, sourceComments here is what my grunt looks like
sass: {
dist: {
options: {
includePaths: ['scss'],
imagesDir: 'assets/img',
cssDir: 'assets/css'
},
files: {
'assets/css/app.css': 'sass/app.scss'
}
}
sourceComments: {
options: {
sourceComments: 'normal'
},
files: {
'assets/css/source-comments-app.css': 'sass/app.scss'
}
},
sourceMap: {
options: {
sourceComments: 'map',
sourceMap: 'source-map.css.map'
},
files: {
'assets/css/source-maps-app.css': 'sass/app.scss'
}
},
},
but am getting an error... is grunt suppose to get all the mapping information from app.scss for the sourcemap and sourceComments?
You can use a source map to easily identify which sass file a part of the compiled app.css comes from.
See the sourceComments and sourceMap options in the grunt-sass plugin.
I found the answer via grunt..after a lot of trials
sass: {
dist: {
options: {
includePaths: ['scss'],
imagesDir: 'assets/img',
cssDir: 'assets/css',
sourceComments: 'map',
sourceMap:'assets/css/app.css.map'
},
files: {
'assets/css/app.css': 'sass/app.scss'
}
}
},
it has to be inside the options of the scss compile!
I'm using Grunt with Foundation 5 (a Foundation 5 Drupal subtheme, to be exact), and it worked when I added sourceComments: "map" to dist, like so:
dist: {
options: {
**YOUR OTHER OPTIONS HERE***
sourceComments: "map"
}
}