I just can't get Codekit to compile my files.
I created a New Zurb Foundation project exactly as Bryan did in his video. No errors but for him the page loads with the styles. For me it just loads html but no styles are included except app.css.
Bower succesfully downloads all the files to bower_components. How can I make codekit to compile all files? Do I have to manually move the files from the folder to the root? I'm trying to start with SASS so I don't know how the imports work.
They don't mention any imports or any particular settings here: https://incident57.com/codekit/help.html#zurb-foundation
I had same issue, but enabling the libsass compiler for app.scss seemed to work for me.
Highlight app.scss, then in the right pane, select "Use the libsass compiler."
I was able to get this working by changing the output file for app.scss to be /css/app.css. That was the path the the index.html file was looking for.
You'll probably need to create the "css" folder in your project, as it wasn't there for me by default.
Related
I have to modify the project that someone made. The source seen through the Chrome browser does not exist in real. How could I update the project?
output.js is on the root directory and there is no code... nothing.
I just started using Prepros to compile my SCSS files and I can't seem to figure out how to enable live editing of those files in Chrome Developer Tools.
I'm not really sure how this is supported nowadays, but I've found some examples showing this in action (such as this video) and I know it used to be an experimental feature in earlier versions of Chrome.
In Prepros, I have Source Map enabled and the map is showing up in my filesystem properly.
Chrome is also showing all the SCSS files correctly, but I can't save any changes to the file system (basically, whenever I change something, it only changes in the compiled main.css file).
As you can see here, there are no green dots next to the SCSS files:
...and when I try to edit and save them in the Sources panel, this shows up:
Here's my Prepros project structure (everything gets compiled into the main.css file):
Is there any way to set this up so that I could edit anything in DevTools and save it to the file system from there? I want to avoid copying code over to my text editor as much as possible.
Like many developers I am using SASS as a preprocessor. I want to edit my stylesheets in Chrome. I've setup Source Maps to do this, and I know Chrome now supports SASS.
I have a SASS file, style.scss, used to create style.css used on the page. It's mainly just imports of other SASS files. Eg:
#import "colors";
Clicking an imported SASS file, like _colors.scss, it shows a green 'active' icon and shows it is linked to a source map.
However when I edit a SASS variable - like the $dark-blue in the screenshot below, where I've made it a red instead - the file doesn't change, nor does the page update.
How do I edit an imported SASS file in Chrome DevTools?
Edit: note the 'Linked to' on the imported file doesn't seem correct. The only way _colors.scss is used is part of style.scss which is turned into style.css. I suspect this is the cause of the problem. I've opened https://github.com/gulp-sourcemaps/gulp-sourcemaps/issues/349 to see if this is the case.
I am using sass with prepros compiler and sublime editor. I need to have each scss file complied with the same file name.
For example:
I currently have-
header.scss
content-top.scss
footer.scss
and they are all compiles into style.css to create one full style sheet.
I wish to have a style folder with
header.css
content-top.css
footer.css
which will be done automatically when saving and compiling like I normally do.
How can I accomplish this?
Thank you
Check this link out.
It states that you can adjust your project structure (in your case CSS folders) in project settings.
If I remember correctly you may have to buy it so that you can compile more than 4 or 5 Sass files, but I may be wrong.
Also check that you aren't "only" importing sass partials because of this:
Any Sass and Scss file (i.e. including partials) imported by another
file are not shown in the files list but they are still watched by Prepros.
The parent file is re-compiled whenever any of the imported files are changed.
I have a very basic rails application in which I've added compass and zurb foundation to. I've noticed an issue that now when I save changes to any stylesheet, which I'm using scss for, I also have an additional css file with the same name but .css instead of .scss added to the stylesheets directory. This causes a problem because my layout templates then try to use the application.css file instead of the application.scss file.
Has anyone had this happen and how can I get it to stop adding .css files to my stylesheets directory?
In my foundation_and_overrides.scss file the content is the standard zurb foundation content.
However, in the foundation_and_overrides.css file the contents are:
https://gist.github.com/iambca/5084463
Found the issue here: Auto compile SCSS files in Sublime Text 2
I still don't have a solution but this is the issue. Sublime Text 3 is coming so perhaps this will be resolved in the new release.