Why is Prepros compiling scss files prefixed with underscore? - sass

I've generated a couple of helper scss files within my scss project folder indicated by a '_' prefix. On file change however, prepros will compile them into a css file.
As I understand how this should work is _ should indicate to the pre-processor to ignore the file until explicitly included into a standard .scss file. And this isn't the case. Would this be a bug in prepros or is there a configuration setting somewhere that I would need to adjust?

I know this is an older post, but what's happening is if the partials are imported into a main SCSS file, the compiler will ignore the partials as individual files and include them in the main CSS output. If they are not imported, they will compile unless you filter them in the software.

I used Prepros a lot,
I have two Solution of this.
Solution 1: It may be a bug a in software, So updating may solve your problem.
Solution 2: You may have not configured settings, So updating configuration settings.
To updating configuration settings do the following steps:
1- Click on settings
2- Now In File Watcher panel, go to Path Filters and add _*.scss in it. Now what this will do is that it will ignore all .scss extension files starting with _ containg any name.
:)

Related

Prevent MSBuild from Compiling Specific Typescript Files

I've seen various answers on how to generally disable TypeScript compilation in Visual Studio. What I have yet to see is how to disable this for specific files. I have a project where some of my coworkers are still using VS's TypeScript, and others are using Webpack. Ideally, eventually we will move completely to one or the other, but for the time being is there an easy way to get VS to not compile specific TypeScript files?
I have already tried setting Build Action to Content. That alone does not seem to be sufficient.
Something similar to this issue?
If you are using a tsconfig.json file, then the build settings (i.e. which files to exclude from compilation) should be specified in there. It doesn't use the settings on the items in the MSBuild file.
I guess you have a tsconfig.json file in the project.(Not certainly sure,if I misunderstand anything, feel free to contact me). And the setting in that file block the settings in project=>properties like below:
an easy way to get VS to not compile specific TypeScript files?
Set the build action of the tsconfig.json file to None so that it won't block msbuild settings.(Your 'content' build action for xx.ts)
Note: 1. After setting the tsconfig.json file to None,you need to unload and then reload the project to make that change take effect.
Note: 2. Go Tools=>Options=>TextEditor=>JavaScript/TypeScript=>Project make the Automatically compile TypeScript files which are not part of a project disabled.

PhpStorm SCSS trigger compilation on partial change

First of all I have to note that this all worked well some time ago. I have returned to project after some time. Meanwhile I have updated PhpStorm and migrated to Win10. Everything else stayed untouched.
I have problem with triggering scss parial compilation. When I make changes in root file "global.scss" everything works ok - partials are also compiled. However when I make changes in partials PhpStorm not triggers compilation of root file.
PhpStorm version: 2017.2.3
File structure:
Watcher config:
Scope config:
global.scss
I have tried a lot - nothing works. It seems that partials - prefixed with underscore are just ignored by file watcher.
EDIT:
I found something - it seems that wildcard in scope pattern ignores underscored files. However partials are marked as included in files tree. I temporarly changed scope to project files and it works well - unfortunetally I can not leave this setting.
EDIT2:
I don't know is it bug or feature but PhpStorm handles nested Source roots in strange way. Check this file structure:
Without source root for scss directory, compilation is triggered even with scope pattern. However compiled css is placed in wrong directory - so it is not usable.
Based on your info and investigation: you are using nested "Source" folder (on scss) and $SourcepathEntry$ & related macro... which does not seem to work as you expected in your IDE version.
Get rid of it -- your setup does not need it at all. Your folder structure is pretty standard so it can be resolved using more "standard" ways.
Disable this File Watcher for now (you may delete it later) and make new one.
There try $FileDirPathFromParent()$ parametrized macro (it accepts parameters). For example for $FileDirPathFromParent(src)$ it returns foo/bar for some/path/src/foo/bar/baz.scss file path. This macro should do the job when making the needed path.

Not able to add Bootswatch theme to Bootstrap 4?

I'm looking to get started with Bootstrap 4 using SCSS. I think I have Bootstrap 4 with SCSS up and running but I would like to use a theme off of https://bootswatch.com. When I used their themes with BS3 it was straight forward LESS files that you just replaced. With BS4 they have a _variables.scss which is obvious to just replace but then they have a _bootswatch.scss file which I'm not 100% sure what to do with.
I assumed I would just put the _bootswatch partial file in the same location as all the other BS partial files. Then I added #import "bootswatch"; to the end of the bootstrap.scss file and recompiled but that did seem to work.
I've search and can't find any information on this. Their documents mostly show how to insert their precompiled files or use their CDN. There is very little about using their SCSS files.
I did some research and testing and finally got it to work. I wanted to post an answer for others with the same question. Hopefully this will help someone else.
I created a new MVC 5 project and then ran the following NuGet packages.
Install-Package bootstrap
Install-Package bootstrap.sass
This will register Bootstrap and create all of the partial scss files in the Content\bootstrap folder. I then created the Content\scss and copied the _variables.scss and _bootswatch.scss files to that folder.
In my site.scss file I added the following imports to the top of the file.
#import "scss/variables";
#import "bootstrap/bootstrap.scss";
#import "scss/bootswatch";
You'll have to be mindful of the order you place them in, any other order caused it not to work or throw an error due to where the variables are being created and called.
If you research about default! you'll learn that it is the opposite of !important causing that variable to only use that setting if another one is not found. In my mind it would be more accurate to remove the !default values from the Bootswatch _varaiables which is what I did. However, that ultimately didn't seem to affect anything. I still had to use the order above.
I then had to remove any reference to Bootstrap.css in the App_start\BundleConfig.cs file and make sure it references the site.min.css file which will include all the bootstrap classes. Using the Web Compiler plug in for Visual Studio, I had it create and compile the site.min.css for me.

How can I specify different output directories for different SCSS files?

I'm using VS2013 with Web Essentials support for SCSS.
I have a single directory '/Resources/SCSS' for SCSS files.
Some need to Export to '/Resources/Style', others need to go to 'AppThemes/[ThemeName]'. Can I specify the directory I want in the SCSS file?
Web Essentials supplies a single Custom Output Directory.
Thanks
I may provide you simple alternate solution for the same.
Just create a simple .scss file there in 'AppThemes/[ThemeName]' say 'site2.scss'
and import your required .scss files in 'site2.sccs'. It will create a css file for you.

Why does Sass cache folder get created

I have started trying out Sass for my css work. In the directory where my Css file resides I see a '.sass-cache' folder too. Can any one tell me why is this folder created and is it safe if I delete it.
thanks,
By default, Sass caches compiled templates and partials. This dramatically speeds up re-compilation of large collections of Sass files, and works best if the Sass templates are split up into separate files that are all #imported into one large file.
Without a framework, Sass puts the cached templates in the .sass-cache directory. In Rails and Merb, they go in tmp/sass-cache. The directory can be customized with the :cache_location option.
If you don’t want Sass to use caching at all, set the :cache option to false.
You can configure the Sass cache location by setting a Sass option in your compass configuration file like so:
sass_options = {:cache_location => "path\to\tmp\sass-cache"}
Source: Sass reference
If your main problem is "inhibiting pushes to development environments when multiple developers use/change it", you can add it to your .gitignore file. As stated in the other answer, Sass cache files speed up compilation based on whether a Sass file has changed since last compile.
In my experience it's standard practice to consider them temporary files, and omit them from version control.

Resources