Goal
Compile many .sass files to one .css file, where all .sass and .css files are in the same directory.
Problem summary
I'm trying to compile many .sass files to one .css file, all located within the same directory, like this:
- app
- static
- css
- _base.sass
- _header.sass
- _layout.sass
- _map.sass
- _modal.sass
- _windows.sass
- main.v0.css
- main.v0.css.map
- main.v0.sass
I'm using the VSCode extension Live Sass Compiler, which has worked seamlessly in the past for what I'm doing but all of a sudden it's breaking my source mappings. I also can't remember/figure out how to do a many to one Sass compilation at the command line, with the specific constraint of keeping both the .sass and .css files in the same directory.
At this stage, every time I use Live Sass Compiler to compile, my git history shows these changes (see screenshots), which seem to be breaking the site. When I load my page after making changes in this way, all the styling for my site stops working.
Findings
From what I can deduce, it's wiping all the previously compiled styling from main.v0.css and replacing it with mapping information. In main.v0.css.map it seems to be stripping sourceRoot information, changing sources from main.v0.css to main.v0.sass, and changing file from main.v0.css to main.v0.sass (so just switching those two for some reason).
Can anyone help me? Maybe this broke with the last VSCode update or something?
Related
I am running PhpStorm 2016.3.2 (I believe it is the current latest).
Since I've updated to this version, css files are always grouped / nested under their scss source files in the project tree, regardless if I have a SCSS watcher or not.
I've tried creating a completely empty new project, with no file watchers whatsoever, and manually created two files: test.scss and test.css. Immediately, the test.css got grouped under the test.scss.
Furthermore (in another project), I am using a custom transpiler, which creates a x.html file for each x.scss file in addition to the x.css file. However, no matter what I set in the Output paths to refresh field, PhpStorm will always group the CSS file, and only the CSS file under the SCSS node.
I am trying to make it also group the HTML file under that node, but ideally I want to know why is it doing any grouping at all when there are no file watchers?
I do want to point out that this was NOT an issue in the previous version.
Is there some hidden setting I am missing, is it a bug or is it a mandatory new "feature"?
Is there some hidden setting I am missing,
No.
is it a bug or is it a mandatory new "feature"?
It's a new feature -- file nesting no longer relies on presence of File Watcher (and the need to run it to have files actually nested).
At the moment it's implemented as hard-coded list of rules which you cannot modify (but you may try and suggest other rules and why they will be good).
UPDATE: The list of nesting rules is fully customizable since 2017.2 version. You can access those rules via cog icon in Project View panel where you may add your own or even disable such nesting.
I opened my project on another computer, and the files where I'd been using a file watcher were expanded, like before they used to be nested like home.scss is now after I run the watcher once on that file.
Is there a way to automatically make all the files be nested?
Because when adding new files and folder with git, it would be quite troublesome to go into each and every file in order to make them become nested.
Like I have some minified JavaScript files that used to be nested, but now is expanded for some reason.
Hope you understand. Thank you.
Edit: Nested***
Is there a way to automatically make all the files go under a caret like that?
Unfortunately not. Such nesting information (to "go under a caret" as you are saying) is taken from "Output path to refresh" field of the corresponding File Watcher.
You have to run file watcher for such files at least once in order to see files nested like you have it on your another computer.
Here is how you can run File Watchers manually without the need to modify those files (so no extra history will appear in your git (or whatever VCS you may be using there)).
https://stackoverflow.com/a/20012655/783119
P.S.
In PhpStorm 2016.3 (the next version that will be released in 1.5-2 months or so) such nesting will be done automatically (the most common combinations) so there will be no need to have File Watchers for providing such info.
If you wish -- you can try EAP build right now (EAP means Early Access Program .. which is sort of Alpha/Beta builds (simply speaking).. and therefore some bugs for new functionality might be present and performance may not be optimal).
I'm using this yeoman generator (https://github.com/Swiip/generator-gulp-angular) for my project. And have added a couple of bower libraries, namely, videojs, ngDialog.
The problem I'm experiencing is that the css files included in these libraries aren't being packaged up into the vendor.css file like the rest of the packages are. I know that that the generator uses wiredep, but I'm afraid I don't know enough about it to find out what went wrong.
Basically, when I go to view source, I see that there are style includes underneath the vendor.css style include, eg.
<link rel="stylesheet" href="../bower_components/ngDialog/css/ngDialog.css">
Also notice how it is included using "../". This would break if I'm in an HTML file that is in a directory other than the root.
Any pointers?
Thanks.
John.
Basically you don't have to worry about the building process, the gulpfile provided by gulp-angular is well configured for you future including bower components.
Once you run bower install your_component, be sure to run gulp build again in command line, it will then include the needed styles to your index.html.
If you would like to know more about the underlying process with that, you may check yourapp/src/index.html from line 12 to line 20 to get a sense of it. For how wiredep works for your bower components, the official document should suffice.
I use a program that spits out HTML and hhp projects containing data from my databases.
I then compile that hhp with Microsoft HTML Help Compiler (hhc.exe).
It works well, but unfortunately for few projects, hhc compiles fine, but chm file is unusable.
It reports "Cannot open the file: mk:#MSITStore: FileName"
I have no problem with other chm files on my system. I have no problems with other chm I compile. If I remove several topics from my project produced file works again. It doesn't matter what topics I remove. Files that don't work are almost twice the size of files that work, even tho the html and project file is almost the same (very few changes), which leads me to think compression fails silently if size or structure of some file isn't right.
Does anyone have experience like this and what could be the reason?
For those that want to see example, this project will compile and work fine:
Working chm project
And this one compile but fail to open:
Chm that fails
I experienced the identical problem. The CHM was double the usual size and could not be opened. The CHM compiler did not report any error. Removing any random HTML file enabled opening the CHM. I generated many other CHMs on the same day, and all the others were OK.
I worked around the problem in the following way:
I added a very small HTML file to the project. It is a copy of one of the other files in the project, so if a user finds it in a search, it does no harm.
I entered the file name in the HHP.
I recompiled the project in the CHM compiler.
The CHM shrank to the normal size, and it opens normally.
I had exactly the same problem and can say it's all a matter of size and most likely an error in the compression module of hhc.
When I added some lines of documentation the size of the CHM-file increased from 1.6 to 3.1 MB and it could not be opened anymore.
This problem could not only be fixed by removing files but also by adding files.
So I wrote some additional documentation, added it to the project and everything was fine again.
There are a number of reasons why the MS HH compiler may crash.
(1) Invalid filenamesfile and file
The HTML Help compiler does not like some filenames e.g. spaces in a filename can still cause some minor problems with HTML Help. Best to replace spaces with underscores. Avoid "#" in file and folder names.
Try and stick with these characters _, a..z, A..Z, 0..9.
Do not use periods apart from in the normal file extension. Example: A filename such as xxx.h001.gif is identified incorrectly as a HTML file. The compiler then attempts to parse the binary file and crashes.
Do not use file or folder names containing ".chm".
(2) Avoid compiling on a network drive and try to compile on local drive.
(3) Use MJ’s Help Diagnostics to ensure that all the help viewer components are properly installed and registered.
http://helpware.net/downloads/#MJs
(4) Delete the file “hh.dat”, which you should find in this subdirectory:
\Documents and Settings\%username%\Application Data\Microsoft\HTML Help
This file stores information about all the HTML Help files on your system (Favorites, window size and position, etc.), and can cause the files to misbehave if it has somehow been corrupted.
(5) You need to debug your help system. You need to identify the file(s) that are crashing the compiler.
I normally remove sections of the web by renaming or moving folders and files, then recompile. Keep adding and removing sections until the compiler does not crash. Eventually you will find one or two files that are causing the problem. You may also need to debug these files by temporarily removing sections of the HTML file.
I see 0 byte files in the input? Maybe the compiler can't handle that?
I would like to keep two versions of a static html file in my git repository. Both are basically identical, except for links for scripts, media etc (dev version vs. live version).
Right now I keep the dev version in repo, and overwrite the live version values manually on the live machine (=I have local git changes there). I am not happy with this setup, because there's manual labour for each push/pull.
What is the best flow for managing files that cannot be split into config/rest sections (like HTML)?
You could...
Remove the file from your repository and just manually populate it. If it doesn't change very often, this works just fine.
Remove the file from your repository, and generate it from a template via a post-merge script in .git/hooks/post-merge (this hook is run, for example, after git pull).
Name the file after the branch or hostname or some other variable (e.g., static.master.html vs. static.develop.html, etc) and dynamically determine which one to use at runtime.
Those are some ideas. I imagine other folks will contribute additional suggestions.
Expanding on the 2nd bullet point by larsks:
You could keep two copies in the repo (say it were your homepage) index.dev.html and index.prod.html. On the remote, your post-merge script could do something like:
cp -a index.prod.html index.html
or
truncate -s 0 index.html
cat index.prod.html >> index.html
Another problem beside renaming is to keep the content of the both files in sync. So having dedicated files for the same reason only differing in one minor path is a lot of redundncy, if you change one, you have to think on updating the other as well.
OK, you stated that the HTML file is static, but here a line of PHP to generate the difference would solve our problem
Achim