I am having trouble connecting files.
file style.scss
#import 'foundation/foundation';
file foundation/_foundation.scss
/**
Some comment
*/
#import '../../../node_modules/foundation-sites/_vendor/normalize-scss/sass/normalize';
outputed file style.css
/**
Some comment
*/
As you can see I am getting only comment, no imported CSS rules.
Here are my gulp tasks
gulp.task('sass', function () {
return gulp.src('./app/scss/style.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./public/css'));
});
gulp.task('watch', () => {
gulp.watch('./app/scss/**/*.scss', ['sass']);
});
I have not used gulp node sass yet, but have found for cli access as well as manual processes, you need include-path items or an importer function, even if you use explicit paths within the import calls.
You should also check to see that what you imported is not all mixins and functions/variables, since they only operate on the include calls that summon them. if you set a variable and never use it, it won't compile css
Also: you are having it watch a recursive path for sass changes, but hard coded the input, try accepting stdin/pipe on the sass task
Related
I started using Vue using the Vue CLI template. In that template you create a file called 'vue.config.js' to define some settings. More to find here: https://cli.vuejs.org/guide/css.html#css-modules
I had a settings for an global css/sass file so all my components could access the variables (the file only contains vars).
vue.config.js:
module.exports = {
// So we can use the template syntages in vue components (correct me if am wrong)
runtimeCompiler: true,
// CSS settings
css: {
loaderOptions: {
sass: {
// Load in global SASS file that we can use in any vue component and any sass file
data: `
#import "#/assets/css/variables.scss";
`
}
}
}
};
Now I am working on another project. This time I use laravel and vue in one app. Laravel makes Vue works with webpack and webpack.mix.js.
Now here is where I get stuck. I can't create a config so the global css file with the variables can be recognises in the vue "one file components" I can't find any solution on the internet or my own experience to make this work.
Anyone experience with this?
Laravel mix has a shortcut to "indicate a file to include in every component styles" (look for globalVueStyles in the option available). So simply add the code below to the webpack.mix.js file at project root.
mix.options({
globalVueStyles: `resources/assets/css/variables.scss`
});
And install the dependency sass-resources-loader
npm install --save-dev sass-resources-loader
It works only as relative path. Also, the docs say that this option only works when extractVueStyles is enabled, however it was not needed for me.
To have more control over "vue-loader" you can use the undocumented function mix.override
mix.override(webpackConfig => {
// iterate and modify webpackConfig.module.rules array
})
My goal is to use one scss file with n number of asset partials to create n number of css stylesheets while using gulp-ruby-sass.
Here is an example of my directory structure:
- project_folder
gulpfile.js
- css
_asset.scss
style.scss
Inside "gulpfile.js" would have the following:
var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
gulp.task('build', function() {
return sass([
'css/_asset.scss',
'css/**/*.scss'
])
.pipe(gulp.dest('css'));
});
gulp.task('default', ['build']);
Inside "_asset.scss" would have the following:
$textColor: #444444;
Inside "style.scss" would have the following:
//#import "_asset";
.myTextColor {
color: $textColor;
}
By running gulp I would get the error:
error css/style.scss (Line 3: Undefined variable: "$textColor".)
Let's say I was to uncomment line 1 in style.scss. Then running gulp should properly compile style.scss to create style.css, but uncommenting line 1 is not the answer I am looking for. I need gulp to use gulp-ruby-sass or some other plugin to do exactly what line 1 on style.scss is doing, or something like on to it, and get the same results.
P.S. (Hopefully, with this solution I can use 'gulp-rename' and be able to produce multiple css stylesheets using multiple asset files, and only use one scss file!)
I am relatively new to gulp. I have one issue when I try to compile one directory with subfolders with their sass files.
Folder structure:
|_sass
|__folder1
| |_file.sass
|__folder2
| |_file.sass
|__folder3
|_file.sass
My simple gulp task to try the compilation
gulp.task('sass', function(){
return sass('sass/')
.pipe(gulp.dest('css');
}
This task above doesn't work with a folder but if I specify the file like in gulp task below, it works correctly.
gulp.task('sass', function(){
return sass('sass/folder1/file1.sass')
.pipe(gulp.dest('css');
}
I have checked the documentation of the repository (gulp-ruby-sass) and other topics in stackoverflow and the one solution that i have found is import all sass code into one file and compile it.
I have tried different paths: ./sass, sass, sass/ even the last syntax with gulp.src(path/**/*.sass) with gulp-sass repository as well.
Can you help me?
Thanks in advance
Edit: Using gulp-sass, not gulp-ruby-sass, since gulp-ruby-sass does only support single files, as mentioned in the docs:
gulp-ruby-sass doesn't support globs yet, only single files or directories. Just like Sass.
You should create a stream with valid glob arguments gulp.src() instead of just calling sass() directly and call it in a pipe():
gulp.task('sass', function (){
return gulp.src([
'sass/folder1/file.sass',
'sass/folder2/file.sass',
'sass/folder3/file.sass'
])
.pipe(sass())
.pipe(gulp.dest('css'));
});
If the files you just want to import are named correctly (starting with an underscore), this should work as well:
gulp.task('sass', function (){
return gulp.src('sass/**/*.sass')
.pipe(sass())
.pipe(gulp.dest('css'));
});
Edit: Fixed some code errors - SO needs a linter (;
I'm actually trying to build a gulp planning to do web related stuff, like compile sass, minify css, uglify javascript and so on. But I'm really having troubles with sass.
Here's a sample of my code :
gulp.task('compile-sass', function() {
gulp.src(buildType+config.path.sass+"/main.sass")
.pipe(compass({
css: 'css',
sass: 'sass'
}))
.pipe(gulp.dest(buildType+config.path.css+"/test"));
});
So I'm using compass here because i only have *.sass files and no .scss so gulp-sass wouldn't work for me. Therefore, I'm asking if anyone could give me a hint of why this task doesn't work. Here's what my console returns :
[gulp] Starting 'compile-sass'...
[gulp] Finished 'compile-sass' after 6.11 ms
[gulp] You must compile individual stylesheets from the project directory.
events.js:72
throw er; // Unhandled 'error' event
^
[gulp] Error in plugin 'gulp-compass': Compass failed
at Transform.<anonymous> (/Users/myusername/node_modules/gulp-compass/index.js:37:28)
at ChildProcess.<anonymous> (/Users/myusername/node_modules/gulp-compass/lib/compass.js:136:7)
at ChildProcess.EventEmitter.emit (events.js:98:17)
at maybeClose (child_process.js:753:16)
at Socket.<anonymous> (child_process.js:966:11)
at Socket.EventEmitter.emit (events.js:95:17)
at Pipe.close (net.js:465:12)
I know I'm not using any config.rb, but two things :
1) I found no example of such files
2) gulp-compass doc gives example without such a file so I assume it's optional
Thanks in advance.
Thanks to SteveLacy i could manage to fix this.
If you only have .sass files, and no .scss, you need to use gulp-ruby-sass instead of gulp-compass or gulp-sass. Here is a sample of my working code :
var sass = require('gulp-ruby-sass');
gulp.task('compile-sass', function() {
gulp.src(path/to/your/sass/folder/main.sass")
.pipe(sass())
.pipe(gulp.dest('path/to/your/css/folder));
});
The most basic and simple way is:
var sass = require('gulp-ruby-sass');
gulp.task('styles', function() {
gulp.src('sass/*.scss')
.pipe(sass({
noCache : true,
style : "compact"
}))
.pipe(gulp.dest('css'));
});
The newest version of node-sass which is used by gulp-sass supports sass and scss syntax.
https://github.com/sass/node-sass/releases
or the latest release at this moment
https://github.com/sass/node-sass/releases/tag/v0.9.3
node-sass is using libsasss
https://github.com/sass/libsass/releases
Look at their 2.0 release notes.
I know this may not be the correct place for this answer, but there wasn't much on Google for people with gulp-ruby-sass errors.
For anyone receiving an error "source does not match any files." Be sure to make sure the path(s) you place within gulp.src() have at least 1 sass (or scss) file within them.
In my situation, I had 3 paths for the task and only 1 of the paths was completely empty. By adding a blank file (_fake.scss) to that path the error was fixed.
Hope this helps someone!
Newer versions of node-sass (and therefore gulp-sass, which is just a thin wrapper around node-sass) handle both sass and scss syntax, and decides which syntax to use by reading the file extension.
Here is a demonstration of a gulp file which handles both scss and sass syntax (not that you'd want that in your project):
var sass = require('gulp-sass');
sass.compiler = require('node-sass');
gulp.task('my-sass-task', function () {
return gulp.src('styles/**/*.sass') // note file ext
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('static'));
});
gulp.task('my-scss-task', function () {
return gulp.src('styles/**/*.scss') // note file ext
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('static'));
});
This doesn't seem to be documented anywhere easy to find, I just happened to stumble on it.
Side note: I was wooed by sass but think I'll be moving to scss instead. This SO question has a lot of useful information in the answers if you're hovering over which to choose.
I want to be able to "#import" a file with SASS depending on a Grunt parameter.
With grunt I want to:
grunt someTask --skinName=yellow
Inside app.scss I want to somehow use this parameter:
#import "$skinName";
Some context...
This skinName.scss contains a lot of SASS variables with color codes so that I can easily change colors all over the app. I Should be included before all my SASS #imports.
You could solve this with another scss file that is written by grunt during the build process:
grunt.registerTask('skin', function () {
grunt.file.write('skin.scss', '#import "' + grunt.option('skinName') + '";');
});
Then simply import the skin.scss in your app.scss.