I'm new to Sass, so sorry if this is basic.
I'm compiling my main sass file using gulp, which works fine. However, I'm having trouble bringing in partials - I'm doing it wrong, but I can't figure out how.
style.scss
#import partial
$main-color: rgb(117, 0, 0);
h1 {
color: $main-color;
}
h2 {
color: $secondary-color;
}
_partial.scss
$secondary-color: rgb(175, 87, 205);
gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-sass');
gulp.task('default', function() {
return gulp.src('style.scss')
.pipe(sass(
{outputStyle: 'compressed'})
.on('error', sass.logError)
)
.pipe(gulp.dest('css'))
})
Do I need to add something to the gulp task to make it compile both the base scss file and the partial?
Line 1 of your style.scss should be #import 'partial';
Sass requires the quotes and the semicolon (for the semicolon you may have been tripped up by the fact that .sass Sass wouldn't use that semicolon)
Related
I'm facing an issue on Sass compilation with Gulp.
I've some variables defined in a file, _typos.scss, like this:
$AristaFont : "Arista", Trebuchet MS, sans-serif;
And when I use this variable in another file,_layout_header.scss, Gulp say the variable is not defined:
[gulp-sass] sass/layout/_layout-header.scssError: Undefined variable: "$AristaFont".
on line 107 of sass/layout/_layout-header.scss
These files are located in different folder like:
sass/layout/_layout-header.scss
sass/global/_typos.scss
Is it a problem for gulp-sass ? It wasn't with compass.
Thanks
EDIT: an excerpt of the application.scss witch import all scss files.
#import "global/_typos.scss";
#import "global/_style.scss";
#import "global/_flex.scss";
#import "global/_stacktable.scss";
/*#import "global/sub-nav";*/
// Import des partiels du layout du thème Drupal
#import "layout/_layout.scss";
#import "layout/_layout-nodes.scss";
#import "layout/_layout-nodes-flexbox.scss";
#import "layout/_layout-header.scss";
#import "layout/_layout-footer.scss";
My package.json excerpt:
"devDependencies": {
"event-stream": "^3.3.4",
"gulp": "^3.9.1",
"gulp-autoprefixer": "^3.1.1",
"gulp-load-plugins": "^1.5.0",
"gulp-notify": "^3.0.0",
"gulp-sass": "^3.1.0",
"gulp-shell": "^0.6.3",
"gulp-size": "^2.1.0",
"gulp-sourcemaps": "^2.6.0",
"gulp-util": "^3.0.8",
"node-sass-import-once": "^1.2.0",
"notify-send": "^0.1.2",
"typey": "^1.1.1"
},
please use this way:
in gulpfile.js file use this code:
//////////////////////////////////////////
const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');
const concat = require('gulp-concat');
/**
--Top level function--
gulp.task = Define task
gulp.src = Point topfiles to use
gulp.dest = Points to folder to output
gulp.watch = watch files and folder for change
**/
//Log message
gulp.task('message', () =>
console.log("gulp is running... ")
);
//optimise images
gulp.task('imageMin', () =>
gulp.src("images/**/*")
.pipe(imagemin())
.pipe(gulp.dest("img_min"))
);
//compile sass
gulp.task('sass',() =>
gulp.src("sass/**/*.scss")
.pipe(sass().on('error',sass.logError))
.pipe(gulp.dest("css"))
);
//concatinate and minify js
gulp.task('script',()=>
gulp.src("js/**/*.js")
.pipe(concat("script.js"))
.pipe(uglify())
.pipe(gulp.dest("js"))
);
//all task in this file
gulp.task('default',['message', 'imageMin', 'sass', 'script']);
//watch command
gulp.task('watch', ['message', 'imageMin', 'sass', 'script'], function() {
gulp.watch("images/**/*",['imageMin']);
gulp.watch("sass/**/*.scss",['sass']);
gulp.watch("js/**/*.js",['script']);
});
/////////////////////////////////////////////////////
after that in your_main_sass_file.scss use this
#import "abstractions/**/*";
#import "variables/**/*";
#import "base/**/*";
#import "layout/**/*";
#import "components/**/*";
where abstraction,variables,base,layout,components are the folder inside the sass folder all of them contain different .scss partial files
and your_main_sass_file.scss is outside these folders;
hope this will work
sass gives an error message
Error: File to import not found or unreadable: helpers/mixins.scss
Parent style sheet: .../temp/styles/all.scss
on line 1 of temp/styles/all.scss
>> #import 'helpers/mixins.scss';
^
at this point, the code looks like
#import 'helpers/mixins.scss';
#import 'helpers/variables.scss';
#import 'helpers/fonts.scss';
#import '../../node_modules/bootstrap/scss/bootstrap';
#import '../../node_modules/fotorama/fotorama.css';
.navbar {
#extend navbar-light;
#extend bg-faded;
}
gulp task looks like this
var blocks = 'app/blocks/**/*.scss';
gulp.task('styles', () => (
gulp.src(['app/styles/app.scss', blocks])
.pipe(concat('all.scss'))
.pipe(sass({
errLogToConsole: true,
indentedSyntax: false
}))
.pipe(gulp.dest('temp/styles'))
));
How to solve this problem?
how to make galp correctly understand the way?
In your gulp file you can declare sass paths, eg.
var sassPaths = [
'node_modules/bootstrap/scss',
'node_modules/fotorama'
];
These are relative to your gulp file.
Then set include paths inside your list of sass arguments
.pipe(sass({
errLogToConsole: true,
indentedSyntax: false,
includePaths: sassPaths
}))
Then in your sass make sure your imports are either relaitve to the parent sass file or relative to one of the include paths.
I put together this gulp task using the docs to compile down my application Sass, but it doesn't seem to build any of the Foundation 6 Sass files except for the initial comment in foundation.scss.
// gulp task
'use strict';
var path = require('path');
var gulp = require('gulp');
var sass = require('gulp-sass');
var config = require('./../config.js');
var helpers = require('./../helpers.js');
gulp.task('sass', ['clean-styles'], function () {
helpers.log('Compile Sass');
var source = path.join(
config.assetsPath, // <-- 'assets/js'
config.css.sass.folder, // <-- 'sass'
'**/*.scss'
);
var outputFolder = path.join(
config.publicPath, // <-- 'public'
config.css.outputFolder // <-- 'css'
);
return gulp.src(source)
.pipe(
sass(config.css.sass.pluginOptions)
.on('error', sass.logError)
)
.pipe(gulp.dest(outputFolder));
});
Which going by the terminal appears to compile the sass found in app.scss with no errors thrown:
Terminal Output
$ gulp sass
[00:08:41] Using gulpfile D:\projects\app\gulpfile.js
[00:08:41] Starting 'clean-styles'...
[00:08:41] Clean Styles
[00:08:41] D:\projects\app\public\css\app.css
D:\projects\app\public\css\app.css.map
[00:08:41] Finished 'clean-styles' after 23 ms
[00:08:41] Starting 'sass'...
[00:08:41] Compile Sass
[00:08:41] Finished 'sass' after 215 ms
Sass Source Files
// app.scss
// --------------------------------------------------------------------------
// Core Foundation Imports
// --------------------------------------------------------------------------
#import "../../../public/vendors/foundation-sites/scss/foundation";
.help {
color: red;
}
But inside the file the only thing that appears is the comment from the top of the foundation.scss and the sourcemap tag:
Compiled CSS
// app.css
/**
* Foundation for Sites by ZURB
* Version 6.2.1
* foundation.zurb.com
* Licensed under MIT Open Source
*/
.help {
color: red;
}
/*# sourceMappingURL=app.css.map */
Doesn't add in any of the imports located in the file. Just the comment at the top.
Foundation.scss File Imports
/**
* Foundation for Sites by ZURB
* Version 6.2.1
* foundation.zurb.com
* Licensed under MIT Open Source
*/
// Sass utilities
#import 'util/util';
// Global variables and styles
#import 'global';
// Components
#import 'grid/grid';
#import 'typography/typography';
#import 'forms/forms';
#import 'components/visibility';
#import 'components/float';
#import 'components/button';
#import 'components/button-group';
#import 'components/accordion-menu';
#import 'components/accordion';
#import 'components/badge';
// ...
Anyone know why this is happening? I can add my own selectors and they show up, but none of Foundation 6 is compiled. I've got the latest gulp-sass and node-sass via npm.
You have to include all the files you need to compiled to CSS like this.
#include foundation-global-styles;
#include foundation-flex-grid;
#include foundation-typography;
#include foundation-button;
#include foundation-forms;
#include foundation-accordion;
#include foundation-accordion-menu;
#include foundation-badge;
#include foundation-breadcrumbs;
#include foundation-button-group;
#include foundation-callout;
#include foundation-close-button;
....
I have set up a webapp using Sass with Yeoman's angular fullstack generator. It seemed to be running fine, until I realised errors that were being output every time grunt tries to run a task. Here's the output:
/Users/rorysmith/.rvm/rubies/ruby-2.2.1/bin/scss --no-cache --update app.scss:app.css
error app.scss (Line 4: File to import not found or unreadable: ../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap.)
Process finished with exit code 1
It's referring to a line in the app.scss file:
#import '../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap'
I changed the directory to include ../ at the start, as this is where my bower_components live:
When commented out, it has an issue with a different line of the same file:
#import 'modal/modal.scss';
Here's the app.scss file in its entirety, it's just the stock one created by the generator:
$icon-font-path: "../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap";
$fa-font-path: "../bower_components/font-awesome/fonts";
#import '../bower_components/bootstrap-sass-official/vendor/assets/fonts/bootstrap';
#import '../bower_components/font-awesome/fonts';
/**
* App-wide Styles
*/
.browsehappy {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
// Component styles are injected through grunt
// injector
#import 'account/login/login.scss';
#import 'admin/admin.scss';
#import 'create/create.scss';
#import 'main/main.scss';
#import 'modal/modal.scss';
// endinjector
Any idea what on earth is going on?
I was encountering the same problem, here's what "fixed" it for me...
In the Gruntfile, find the following:
// Inject component scss into app.scss
sass: {
options: {
transform: function(filePath) {
filePath = filePath.replace('/client/app/', '');
filePath = filePath.replace('/client/components/', '');
return '#import \'' + filePath + '\';';
},
starttag: '// injector',
endtag: '// endinjector'
},
files: {
'<%= yeoman.client %>/app/app.scss': [
'<%= yeoman.client %>/{app,components}/**/*.{scss,sass}',
'!<%= yeoman.client %>/app/app.{scss,sass}'
]
}
},
Modify the following line to read:
filePath = filePath.replace('/client/components/', '../components/');
Now it should inject with the correct paths.
Caveat: I don't really know what I'm doing.
My Gulp SCSS Compiler below works fine with single files, and when including files into a single output e.g. styles.scss & _base.scss which would output styles.css.
However if I was two output files e.g. styles.css & base.css upon making the scss file 'base.scss' it complies it to the dest still with the .scss extension. Its not till I actually rerun the compile task till I get a base.css file as well as the base.scss file in the dest folder...
gulp.task('build-css', function() {
return gulp.src('source/scss/**/*.scss', { style: 'expanded' })
.pipe(plugins.sass())
.pipe(gulp.dest('public_html/css'));
});
Im using node-sass. I do not want to use ruby-sass
Output in public_html/css/
What I'm getting
css/
- base.scss
- base.css
- style.css
what I want to get
css/
- base.css
- style.css
You are putting { style: 'expanded' } in the incorrect location of the function. Your function should look like this instead:
gulp.task('build-css', function() {
return gulp.src('source/scss/**/*.scss')
.pipe(plugins.sass({ style: 'expanded' }))
.pipe(gulp.dest('public_html/css'));
});
There is no such an option as { style: 'expanded' } available in for gulp.src
To control the output style, you need to specify outputStyle and pass it as an argument with plugins.sass(options) call.