I try to run a gulp task to compile my sass project but since I create subfolder app/assets/ and put my sources files into it, I have a issue. Before when sass and css folder was in the same directory than my gulpfile it was running perfectly. And if I run a compass watch command on my base directory I have no issue, this is only with gulp-compass.
The output :
Devnco: /Users/Devnco/Web/maquette ->gulp sass
[gulp] Using gulpfile ~/Web/maquette/gulpfile.js
[gulp] Starting 'sass'...
[gulp] Finished 'sass' after 6.12 ms
[gulp] You must compile individual stylesheets from the project directory.
[gulp] Plumber found unhandled error: [gulp] Error in plugin 'gulp-compass': Compass failed
[gulp] You must compile individual stylesheets from the project directory.
[gulp] Plumber found unhandled error: [gulp] Error in plugin 'gulp-compass': Compass failed
[gulp] You must compile individual stylesheets from the project directory.
[gulp] Plumber found unhandled error: [gulp] Error in plugin 'gulp-compass': Compass failed
My gulpfile.js :
var paths = {
css: './app/assets/css',
sass: './app/assets/sass/*.scss',
js: './app/assets/js',
images: './app/assets/images'
}
gulp.task('sass',function(){
gulp.src(paths.sass)
.pipe(plumber())
.pipe(compass({
css: paths.css,
sass: paths.sass
}))
.pipe(gulp.dest(paths.css))
.pipe(minifyCss())
.pipe(rename({ extname: '.min.css'}))
.pipe(gulp.dest(paths.css));
});
My working directory :
gulpfile.js
app/
assets/
fonts/
images/
sass/
css/
pages/
etc…
And my package.json with the versions that I use (lastest)
"devDependencies": {
"gulp": "^3.6.2",
"gulp-compass": "^1.1.9",
"gulp-concat": "^2.2.0",
"gulp-minify-css": "^0.3.4",
"gulp-plumber": "^0.6.2",
"gulp-rename": "^1.2.0"
}
I made some searches but not still not found where is the problem.
Thanks in advance.
I use this to compile my compass file and it works fine, it comes right from the gulp-compass docs
if you are not using config.rb
var compass = require('gulp-compass'),
path = require('path');
gulp.task('compass', function() {
gulp.src('./src/*.scss')
.pipe(compass({
project: path.join(__dirname, 'assets'),
css: 'css',
sass: 'sass'
}))
.pipe(gulp.dest('app/assets/temp'));
});
if you are using config.rb
var compass = require('gulp-compass');
gulp.task('compass', function() {
gulp.src('./src/*.scss')
.pipe(compass({
config_file: './config.rb',
css: 'stylesheets',
sass: 'sass'
}))
.pipe(gulp.dest('app/assets/temp'));
});
I was having this problem tonight as well. I fixed it by changing my config.rb path. Try
.pipe(compass({
config_file: './config.rb',
css: paths.css,
sass: paths.sass
}))
If you don't have / want to use a config.rb I believe you have to set the project root like in the "Load config without config.rb" section of https://www.npmjs.org/package/gulp-compass
I was having this issue as well, I found that the project path needs to point to the folder that contains the folder with the css, scss. For instance:
app /
- src /
- css /
- sass /
given the above structure, your config should look like:
project: "app/src",
css: "css",
sass: "sass"
I got the error when my project path was one level higher, making my css property look like: "src/css"
Related
I've set up gulp and sass file compiler. Below is the contents of the gulpfile.js:
const sass = require('gulp-sass');
gulp.task('sass', function() {
gulp.src('src/assets/scss/**/*')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('src/assets/css'))
});
My folder structure is:
src/
assets/
scss/
theme.scss <!-- main file -->
components/
_.scss <!-- extra files -->
What I want is to basically compile theme.scss into theme.css. However, I also get the /components folder copied inside the src/assets/css folder (though empty). Why is this happening?
I suspect gulp.src('src/assets/scss/**/*') might be the issue.
Try changing this to gulp.src('src/assets/scss/**/*.scss')
I am new to gulp plugins and am trying to get sourcemaps to work
file structure
css/
sass/
theme/
_some-style.scss
_some-style-2.scss
_some-style-3.scss
style.scss
style.css
style.css.map
In my style.scss file I have
#import "theme/some-style";
#import "theme/some-style-2";
#import "theme/some-style-3";
great so I am only getting, _some-style-3.scss to appear in my dev tools when I inspect. I know I have a path issue here but not sure how to fix it.
Gulp file:
gulp.task('sass', function () {
return gulp.src(css/sass/theme/**/*.scss)
.pipe(sourcemaps.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest(css));
});
Your input is a bit confusing as you have different paths in your file structure, your import statements, and your gulp file. I'll base my answer on the path you provided in the file structure.
Your file structure says "theme" is directly under "sass", so your #import statement should be #import "theme/_various-scss-file.scss"
You need to specify the scss file in gulp.src not just the path, for example gulp.src('css/sass/style.scss'). And output path, according to your file structure and assume your gulp file is in the same folder as the css folder, should be gulp.dest('css').
Figured it out. Unrelated to paths. I didn't include that I was also compressing my scss first and that is interfering with the sourcemapping
I have been working on a website and used Gulp to compile my scss files. However, the main.scss file quickly gained in the number of lines and I decided to split it in different files and then import into a single one which will be compiled to css.
here is the structure of my project (other folders, such as /js are omitted)
- css
- sass
- helpers
_variables.scss
main.scss
I use the following line to import _variables.scss in my main.scss
#import 'helpers/_variables.scss';
this is my gulp task:
gulp.task('sass',function(){
return gulp.src('sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('css'))
});
When I launch the task, here what CLI outputs:
[17:13:04] Starting 'sass'...
Error in plugin 'sass'
Message:
sass\main.scss
undefined
i'm using Laravel 5.1, which ships with laravel elixir - a wrapper for gulp.
My gulpfile.js looks like this:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.less('app.less');
});
And app.less looks like this:
#import "../bootstrap/less/bootstrap.less";
#import "variables";
I'm running gulp watch from the command line, but the problem is that it only reacts when changes are made to app.less and not the imported files (e.g. bootstrap.less).
How can I enable gulp watch to watch imported files also?
Thanks
Turns out that because ../bootstrap/less/bootstrap.less is above the root folder being watched, then it is not watched, despite it being included.
gulp watch watches all assets in the folder, it doesn't read the less files for includes.
I'm using grunt-contrib-compass to compile my SCSS files, and here's the Gruntfile configuration for the same.
compass: {
dist: {
options: {
watch: true,
imagesDir: 'web/assets/img',
sassDir: 'web/assets/scss',
cssDir: 'web/assets/css'
}
}
}
As you can see that I'm using Compass' "watch" option to watch for files for change. So all files within scss folder are compiled and eventually, one main file styles.css is generated within css folder. While I can use outputStyle: "compressed" option for Compass task to generate all CSS files minified, I want those files to remain expanded.
So is there anyway I can generate original files as expanded while an additional file .min.css which is compressed?
An alternative solution I have as of now is to avoid using watch of compass, and rely on grunt-contrib-watch and grunt-contrib-cssmin instead. But grunt-contrib-watch is much slower compared to that of Compass.
I cannot have another watch task running to monitor CSS files and run cssmin when they're changed, since starting compass with watch: true will block any other following tasks (unless I use something like Grunt-concurrent, which I want to avoid).
Any help is appreciated.