I am using vscode live sass compiler to compile my sass code to css and am trying to destructure my code such that I have codes for specific function in separate file then I can import them to the main .scss all at once so that one css file to be generated as this is all I need because am using react.
I have been succesfull so far my problem is that even the other refactored code that I already imported are compiled to css. I don't need this.
How can i tell live sass compiler to ignore them?
You can use liveSassCompile.settings.excludeList setting to exclude specific folders. All Sass/Scss files inside the folders will be ignored.
You can use negative glob pattern too if you want to exclude a specific file or files inside this folders.
Examples:
Default value
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**"
]
Negative glob pattern - if you want exclude all file except file1.scss & file2.scss from path/subpath directory, you can use the expression
"liveSassCompile.settings.excludeList": [
"path/subpath/*[!(file1|file2)].scss"
]
You can find more info here.
There are two way through which you can prevent file to be compiled to generate separate .css file
File(.scss) name starting with underscore( _ ) well not be compiled to generate css file
If you have a folder with multiple .scss files you can exclude all files within folder and its subfolders through vscode setting.json file
Code
"liveSassCompile.settings.excludeList": [
"**/node_modules/**",
".vscode/**",
"**/YOUR_FOLDER/**"
],
replace YOUR_FOLDER with your desired folder
example I have 'vender' named folder with all bootstrap source code files
Example:SCSS files in vender folder and it's subfolder will not be compiled
Related
I have this template - web template - editorial when I added it to my existing Meteor app it does not load the scss files, only the css file which is in the client directory. Though I put the scss files in the public folder. What best way can I add this? because I could not get it to work i decided to compile the scss to css.
sass_folder
scss_subfolder
----base_scss_subfoler
_partial1.scss
_partial2.scss
----components_scss_subfoler
_buttons.scss
_textbox.scss
----layouts_scss_subfoler
_pages.scss
_footer.scss
----libs_scss_subfoler
_functions
_vars
_skels
_mixins
main.scss
ie8.scss
ie9.scss
css_output_folder
I have tried to compile the files by doing thus on the cmd: sass --update scss:css it only compiled the main.scss, ie8.scss, ie9.scss to the css folder, other are not compiled. How do I compile all at once and maintain the same sub-directory folder in the css folder. Why and how do I do this?
If other files name start with _ character then these files are partials meaning they get no compiled and their content can only used with import.
Read the official doc about partials.
The files with names starting with underscore are considered as partials and not compiled to css files. That is why you are not seeing those in your output css.
Please navigate to section with heading 'Partials' in this document ... and read the next 2 sections.
You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the #import directive.
I'm using SASS and Netbeans for web development. Is it possible to create the default and minified CSS file at once?
Example: I've one SASS file like style.scss and want as fast as possible two compiled files named style.css and style.min.css
What can I do in Netbeans to get both files at once when I save or precompile my SASS file? Is there any solution or does it need every time a manual step to add compress on the command line, etc.?
Thanks!
I have some problems with SASS in ionic,
Whats the problem?
The problem is that custom stylesheet's doesn't work how it should.
I have sass folder with ionic.app.scss file and _test.scss file with some code.
I imported _test.css in ionic.app.scss file like this:
#import "../scss/test";
And when I edit and save ionic.app.scss, it's works perfectly, compiled in min.css and working in my browser, but when I edit and save my _test.scss file, nothing happening. _test.scss file only works, when I compile my ionic.app.scss file.
Can someone help me with that? What I miss??
Without seeing your folder structure, It's a shot in the dark but i think your _test.scss file isnt being watched.
Try moving it to be in the same directory as the other files and change your import to be.
#import "{folderName}/test";
Just make sure its within the scss folder with the other files
First of all I'm assuming you are using Ionic 1.x.x in my answer. You have a couple of places where you should check.
First is the ionic.project file:
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
]
Make sure you have your directory inside the watchPatterns. This most probably is correct since it's the Ionic default. You however mentioned sass folder in your question so I can't be sure. This is why I'm suggesting all the custom folder stuff below. Although you also mentioned that ionic.app.scss is located in the same folder so the folder probably is the default ionic folder if you have not changed the name of the folder.
Secondly in your gulpfile.js you have the following:
sass: [
'./scss/**/*.scss',
'./www/customfolder/**/*.scss'
],
Make sure your css file is included in these paths. The second one is a possibility when a custom folder is used. Just set the path correctly. This will then use the default ionic gulp task sass and watcher watch.
After this you should be able to include your custom SASS stylesheet in the scss/ionic.app.scss file (not in www folder) with the following:
#import "www/customdirectory/style"; // If custom directory
/* IN YOUR CASE */
#import "style";
If the _style.scss file is in the same directory as the ionic.app.scss then you do not need to set the path, just the name of the file is enough.
Hopefully this can be helpful to you when trying to solve your problem.
I had a doubt regarding compiling the scss file using compass. For example I have 2 directories, 1 for Sass and another 1 for my CSS files. In my css directory, I have 2 CSS files... "xuvs.css" and "site.css"....
If I make changes in the "xuvs.scss" file, so during the final compilation, by default Compass applies the changes to "xuvs.css"... So is it possible to apply those changes in the "site.css" instead of "xuvs.css" file using compass?
By default, Sass and Compass will output .css files for any matching .scss files that are not prefixed with an underscore. This is why your "css" directory contains the two compiled files: one for each of your .scss files.
It is possible to modify xuvs.scss and have it compile into site.css: you would do this via the #import rule, however, unless you changed the file name of xuvs.scss to _xuvs.scss, you would still have a separate, compiled file named xuvs.css. Files that are prefixed with an underscore are called partials.
It is considered a "best practice" to create partials and #import them into a single, compiled "base" .scss file. In your case, this compiled file would be called site.css.
I am using Less in Visual Studio to generate css files. When I check in I only want to check in the less files and exclude the generated css files. Is it possible to exclude css files by default when checking in?
Thanks!
If you are using Local Workspaces, you should be able to use a .tfignore file to ignore the css files like so:
######################################
# Ignore .css files in this folder and all its sub-folders
*.css
If you are using Server Workspaces, I think you will just have to avoid adding them when you use the Add Files to Source Control dialog. You can sort by the file type and select all the css files and choose "Exclude"