I have file stucture like this
client
stylesheet
main.import.styl
template
a
a.styl
b
b.styl
And I try to import main.import.styl in a.styl and b.styl like this
#import main.import
(also I try other options like /main.import, ./..., and more) in result I have failed to locate #import main.import.styl
But if I put a and b files in stylesheet all works fine
I use meteor stylus
My poblem in simple way:
files do not see each other in different folders
folder1
a.import.styl
folder2
b.styl
The correct syntax would be :
#import '{}/client/stylesheet/main.import.styl'
Please refer to the stylus package docs for additional information.
Related
How to use gulp-clean-css to write a new -min.css file instead of the default of overwriting the existing CSS source file?
Currently, I have this line which minifies the file. However, it overwrites the original with the minified version. I would like it to create a new file with the -min.css extension at the end of the original file basename.
src(filePath).pipe(minifyCSS()).pipe(dest('./css/'));
I know there is a gulp-copy in the npm repo I could use. I would like to know if there are any other ways to do it.
Thanks
I don't believe this is possible without installing any additional npm packages, though considering the nature of NodeJS, I don't think it would be considered unreasonable to require one.
One possible way to achieve this (without gulp-copy) would be with gulp-rename and the rename command:
gulp.src(config.css)
// Output the file before cleaning
.pipe(gulp.dest(config.css))
// Clean the file
.pipe(cleanCss())
// Rename with a .min suffix (e.g. app.css -> app.min.css)
.pipe(rename({ suffix: ".min" }))
// Output the minified CSS file
.pipe(gulp.dest(config.css));
This will produce two files - the unminified original .css file and the minified .min.css file.
I'm a newbie to Sass and try to create a folder structure which works with minimal effort when compiling. I want to create multiple files in each multiple directories which have the same name with the file (/.css) and my sass files are located in app/sass folder so that it's transferred with no effort.
I've done a research for the simple tricks of cd notation of any command line but later I understood that the notation of Sass can be different. I've looked for Gulp and Grunt and still couldn't find exactly anything on sending css files to multiple destinations which have the same name. I've searched Sass/CSS structures but I still cannot figure it out how to use a single CSS file for the entire project.
-app
-sass
-index.scss
-admin.scss
-public
-index
-index.css
-admin
-admin.css
sass --watch app/sass/*.scss:public/css/*/*.css
What should I write instead of * that functions as a parameter for everyone?
The Sass guide on their website: https://sass-lang.com/guide tells you to do it like this:
sass --watch app/sass:public/stylesheets
And this link [
sass watching multiple directories
] says you can specify more then one path to watch:
sass --watch path/to/sass1:path/to/css1 path/to/sass2:path/to/css2 path/to/sass3:path/to/css3
So you can watch multiple paths, but still have to specify each of them.
I'm having trouble finding a solution to this problem. I have a less file app.less that only consists of #import statements. Now I want to generate a single less file that includes all imported less files, because I want to send it to the client to compile it there (yes, I have my reasons to do that).
So the less file should not be compiled in the grunt build step, but only concatenated, so that the client doesn't have to load several less files. I feel that this is a usecase that should have appeared for others as well when compiling less on the client, but I couldn't find a single solution. I don't care if the concatenation happens with grunt-contrib-less or any other tool.
LESS docs says:
Use #import (inline) to include external files, but not process them.
See: Import At-Rules and #import (inline)
You could create new file, for example concatenate.less and import .less files with inline keyword. Then if you process it, it will work exactly like concatenation, no CSS is processed out of it.
concatenate.less
#import (inline) "file1.less"
#import (inline) "file2.less"
#import (inline) "file3.less"
And use your Grunt task like you used to, just rename output file extension to .less for clarity. Tested it, should give you exactly what you wanted.
Nested imports
As #seven-phases-max pointed out, that nested imports would be problem in this case.
Solution would be grunt-includes.
Use grunt-includes with includeRegexp option to create files listed in concatenate.less with already imported LESS files to some other folder.
Change concatenate.less files paths to that folder.
Run your LESS compiling Grunt task normally.
in case someone is working with gulp,
you can just create concatenate.less as #Rene Korss sugested, and use the same command as for compiling less.
Less outputs concatenate.css filename, which is misleading in our case,
so I'm using gulp-rename to have filename named as I want.
var src = 'path-to-concatenate-less-file';
var destination = 'path-to-destination';
gulp.task('concatenate-styles', function () {
var compile= gulp.src(src)
.pipe(less())
.pipe(rename('concatenate-all.less'))
.pipe(gulp.dest(destination))
.pipe(notify("Saved file: <%= file.relative %>!"));
compile.on('error', console.error.bind(console));
return compile;
});
Example of concatenate.less:
#import (inline) "general.less";
#import (inline) "typography.less";
I have style.less which import "page.less". When something is changed in page.less, I have to turn to file style.less and save to let less2css compile so that the changes will take effect otherwise it doesn't because page.less is imported! So is there a way to let less2css compile all files when one of them is changed?
Assuming you're already using the LESS-build you can use SublimOnSaveBuild. This would also work in other scopes.
Alternatively, there's a LESS-only package for Sublime Text as well.
My application has many constants (kvo keys, enums, etc.) that are used by almost every class. I have a constants.h file with all of them. I want include this file in the Prefix.pch file as follows:
#ifdef __OBJC__
#import <UIKit/UIKit.h>
#import <Foundation/Foundation.h>
#import "AppConstants.h"
#endif
However, when I include the file in this manner, Xcode 4's syntax highlighting and code completion stops working. If I manually include the constants file in the header file for every class that uses them, and remove the include from the pch file, syntax highlighting and code completion returns.
Is this expected behavior? How can I include a constants file in every file without using the pch file? Is the problem that the "AppConstants.h" file is being included in itself because of the pch file?
Have a look at this question. I was having the exact same issue as you. If the first answer doesn't fix it for you, further down the page they mention setting the Precompile Prefix Header option to NO, which is what fixed it for me.
Hope that helps.