I am new to using gulp-sass and sass\scss structure in general, so bear with me!
I have a scss file in which I want to import some partials.
I have a styles folder in which lives my main scss file and a partials sub folder which contains a couple of files I wish to import in.
So at the top of my main.scss I have the typical:
#import 'partials/main_menu';
#import 'partials/main_usermenu';
Here are the relevant pieces of my gulp file:
var paths = {
scss_files:'./src/assets/styles/**/*.scss'
}
gulp.task('compile_sass', function () {
return gulp.src(paths.scss_files, {base:'src'})
.pipe(gulp.dest(paths.dist))
.on('error', gutil.log)
.pipe(sass({outputStyle: 'compressed'})
.on('error', sass.logError))
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest(paths.dist))
});
When my gulp task runs, I get an error saying my main_menu partial was not found or unreadable and hence it fails to import.
Am I missing something in my task, e.g. is there some gulp-sass option I should be using or should it just work?
Thanks
After viewing this related question I was able to solve a similar problem I was having.
I believe if you add the 'includePath' option to the sass() function call that contains the parent path to your partials directory the error will go away.
i.e. something like
.pipe(sass({includePath: ['parent/PathTo/Partials'], outputStyle: 'compressed'})
Related
I work with gulp sass to compile, prefix and minify my scss to css and min.css, I use watch to fire compiling each time I save files but suddenly gulp-sass stopped writing the output files ONLY when saving partials, everything works fine when I save the main style.scss
This is the SASS log in my terminal on both cases, wether saving main file or partial scss files. As you can see it fires both times but only on the main files saving the output is generated and saved.
[11:54:50] Starting 'sass'...
[11:54:51] Finished 'sass' after 886 ms
[11:54:52] Starting 'sass'...
[11:54:53] Finished 'sass' after 809 ms
Gulp is installed globally and the Gulpfile.js below always worked until yesterday.
I tried to change the gulp.src path several times but without luck.
Obviously I still can compile everything saving the main style.scss but is really annoying when you work on several file simultaneously.
Another strange thing is that trying to change files path to compile the minified version wa reverted to an older date version; I thought it could be an NPM cache problem but I'm not really confident with node/npm, I use it just to compile SCSS and concatenate JS and that's it.
Thanks a lot in advance to anyone who could help me.
var themeurl = './';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var rename = require("gulp-rename");
var watch = require('gulp-watch');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var cleanCSS = require('gulp-clean-css');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function () {
return gulp.src(themeurl + '_sass/style.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 10 versions']
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(themeurl))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename('style.min.css'))
.pipe(gulp.dest(themeurl));
});
gulp.task('scripts', function() {
gulp.src('_js/*.js')
.pipe(concat('scripts.js'))
.pipe(gulp.dest('assets/js'));
return gulp.src(themeurl + 'assets/js/scripts.js')
.pipe(uglify().on('error', function(e){
console.log(e);
}))
.pipe(rename('scripts.min.js'))
.pipe(gulp.dest(themeurl+'assets/js/'));
});
gulp.task('watch', function () {
gulp.watch(themeurl + '_sass/**/*.scss', gulp.series('sass') );
gulp.watch(themeurl + '_js/*.js', gulp.series('scripts') );
});
Have you solved your problem? I have the same issue.
My workaround is related how I write watch task. And I have to delete css bundle before every new compilation
// old
watch(`${paths.src}/sass/**/*.scss`, series(css, reload));
// workaround
watch(`${paths.src}/sass/*.scss`, series(delCSSbundle, css, reload));
The result is content of the CSS bundle is updated every compilation but date/time of the bundle remains the same.
Does it work when you replace the style with an * as shown in the code block below? The * tells gulp to search for all files ending with .scss in the folder.
gulp.task('sass', function () {
return gulp.src(themeurl + '_sass/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 10 versions']
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(themeurl))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename('style.min.css'))
.pipe(gulp.dest(themeurl));
});
Thank you Remco , I tried already but unfortunately nothing changed.
As i described upon in the update the problem seems to be related to file's date/time and not on the compiling: the compiling is updated with all my modifications but the date/time is not.
Faced similar issue, gulp tasks were running error free but producing no results for only my styles and image assets (and I didn't add or remove any dependencies, change anything (configuration) or so).
In my case I was using | in src() to read multiple files such as src('src/styles/**/*.{sass|scss}') and src('src/images/*.{png|jpg|svg}') so it turned to be that this was causing my file to be ignored.
Changing | to , solved the issue for me
src('src/styles/**/*.{sass,scss}')
src('src/images/*.{png,jpg,svg}')
I have the following in my gulpfile.js
var baseDir = 'Base/Assets/scss/**/**';
var modulesDir = 'Modules/**/Assets/scss/*';
return gulp.src([baseDir + '*.scss', modulesDir + '*.scss'])
.pipe(sass({cacheLocation: sassCacheDir, lineNumbers: false}))
.pipe(concat('app.min.css'));
Within the baseDir I have an app.scss file like this:
#import "node_modules/foundation-sites/scss/util/util";
#import "settings";
#import "foundation";
Within the util there's a function called rem-calc. I use this function in my Modules scss files, but these are never executed. Instead in the outputted css I have the following margin-top: rem-calc(10); when this should actually have been converted in to rem's.
The only thing I can thing of is that Gulp isn't remembering the src ordering. Any help will be greatly appreciated.
I have solved this by removing the modulesDir from the gulpfile, instead I'm using a new package called gulp-sass-glob
This allows me to specify the glob in my app.scss file (within baseDir), like this:
#import "node_modules/foundation-sites/scss/util/util";
#import "settings";
#import "foundation";
// now import the modules
#import "../../../../Modules/**/Assets/scss/*.scss";
My gulpfile.js is then like this:
var baseDir = 'Base/Assets/scss/**/**';
gulp.task('site-css', function () {
return gulp.src(baseDir + '*.scss')
.pipe(sassGlob())
.pipe(sass({cacheLocation: sassCacheDir, lineNumbers: false}))
.pipe(concat('app.min.css'));
Hopefully this helps someone else which comes across this scenario.
I would like to globally append a specific selector to all CSS selector used in my application.
I'm using React and those Webpack loaders post-css, css-loader, sass-loader and extract-text-webpack-plugin.
I don't want to edit all my classname within jsx files. I just want to append this specific selector at build time.
Is there a loader to achieve this? Or any other solution...
What I actually have:
.myClass {
...
&--blue { ... }
}
What I want after Webpack transpilation:
.specificClass .myClass { ... }
.specificClass .myClass--blue { ... }
Thanks
Gautier
PS: The reason I need this feature is to avoid CSS selector collision with the Website I'm integrating my application. I don't wan't to manually edit all my scss files to append the selector.
this should be solvable by in you main sass file:
.specificClass {
#import 'variables';
#import 'fonts';
// ... do more imports
}
I import a css file with a font-face declared in it with a relative URL.
#import '~materialize-css/dist/css/materialize.min';
.register-container {
#extend .row;
}
I use the raw-loader!sass-loader chain because it's an angular component style.
{
test: /\.scss$/,
include: PathHelper.getPathFromRoot('src', 'app', 'modules'),
loader: 'raw!sass'
},
When I do that the content of the materialize file is being copied. And when I load the page it tries to load the fonts from a wrong directory because the relative path is wrong.
The fonts work because I load them with different loaders chain in a different file. The chain is: css!resolve-url!sass?sourceMap
So the fonts are there but the issue is that the content of the css is copied twice and it loads the fonts multiple times from a front path
Can I do something about it? So that the sass loader will know not to copy the css content?
Might Help?
$font-url: unquote("somefile.css");
#if variable-exists(font-url) {
#import url($font-url);
} #else {
#error "sorry no dice";
}
String Functions
unquote($string)
Removes quotes from a string.
- (Sass::Script::Value::String) unquote($string)
Removes quotes from a string. If the string is already unquoted, this will return it unmodified.
Examples:
unquote("foo") => foo
unquote(foo) => foo
Is there any option available in gulp-sass to combine sass files?
For example:
main.scss:
$var: red;
control.scss:
#import 'main';
.a{
color: $var;
}
The combined output file should be single scss file like below
$var: red;
.a{
color: $var;
}
Did you try something like this?
gulp = require('gulp');
concat = require('gulp-concat');
// the default task
gulp.task('default', function() {
return gulp.src('./*.scss')
.pipe(concat('all.scss'))
.pipe(gulp.dest('./dist/'));
});
This should produce a single combined scss in ./dist/all.scss.
I don't know if #import statements are handled correctly, but these
issues are usually handled by ad-hoc modules (for example, gulp-sass), which produce a .css output...
Here is solution, full proof solution. You need to use gulp-scss-combine as well.
(function(r){
const gulp = r('gulp');
const combine = r('gulp-scss-combine');
const concat = r('gulp-concat');
gulp.task('combine-scss', ()=>gulp.src('scss/**') // define a source files
.pipe(combine()) // combine them based on #import and save it to stream
.pipe(concat('style.scss')) // concat the stream output in single file
.pipe(gulp.dest('css')) // save file to destination.
);
})(require);
You can play with code here . code , basically doing same thing but not in gulp but a node.js standard application. just delete all.scss file or its content, then run the program. you will see the result.
You have to execute one file that imports all other scss files, but when you listen the changes, you have to listen the changes of all files in the scss directory.
gulp.task('sass', function() {
// You have to execute one file that import all other scss files
return gulp.src('src/scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('build/css'));
});
gulp.task('watch', function() {
// You have to listen the all files in the scss directory
gulp.watch('src/scss/**/*.scss',['sass']);
});