Conversion error: Jekyll::Converters::Sass encountered an error while converti
ng 'assets/css/all.sass':
File to import not found or unreadable: 1-tools/-tools-dir.
on line 1
That is the error i get every time i run Jekyll and i can't seem to fix it. I've tried everything that i found on Google and still can't seem to make it work.
Any idea what is wrong with the includes?
My files are like this:
_-tools-dir.sass
#import 'bourbon/bourbon'
#import 'fonts'
#import 'normalize'
#import 'vars'
_-sections-dir.sass
#import 'header'
all.sass
---
---
#import '1-tools/-tools-dir'
#import '2-base/-base-dir'
#import '3-sections/-sections-dir'
and in base-dir i have no includes yet so the file is empty
With default Jekyll settings, all sass/scss/coffee imports are supposed to be in _sass folder.
Your #import '1-tools/-tools-dir' import rule is looking for _sass/1-tools/-tools-dir.sass file and not _sass/1-tools/_-tools-dir.sass (note the underscrore).
You can change the import to #import '1-tools/_-tools-dir or change the file name to -tools-dir.sass.
Same for other imports that will cause the same not found error.
you're probably doing the YouTube tutorial from DevTips (which is a pretty good one imo).
Add this to your config.yml:
sass:
sass_dir: assets/css
style: :nested
Related
Hey guys I'm a newbie learning sass and I'm using node.js and cmd to serve as my local compiler. I have a main.scss file where I have done all my #imports. This is an image of main.scss with all imports Anytime I try to save my work, I get an error saying my variables are undefined, meanwhile they are.
This is the error.
And this is where the supposed error is. Meanwhile my variable.scss is intact, take a look here
So I guess the question is, how do I make my #imports global in my project.
Double Check your variable $color-primary-light if it is define in your scss file. Or change the #import "base/typography function and transfer it to the upper most part of your main.scss.
Scss reads imports from top to bottom and there are some css specificity/hierarchy of css when compiling them into one css file.
#import "base/typography
#import "base/base
#import "base/animations
#import "base/utilities
I have the following mix of Material and bootswatch which cause a compiler error:
#import '~#angular/material/prebuilt-themes/indigo-pink.css';
#import "~bootswatch/dist/yeti/_variables.scss";
#import "~bootstrap/scss/bootstrap.scss";
#import "~bootswatch/dist/yeti/_bootswatch.scss";
#import '~font-awesome/scss/font-awesome';
The error is:
ERROR in ./src/styles.css (./node_modules/#angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./src/styles.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(1:4) Unknown word
> 1 | // Yeti 4.3.1
| ^
2 | // Bootswatch
3 |
According to this, I can use ng set defaults.styleExt scss to start processing Sass files.
However, it doesn't go through the process of converting your already existing .css files to .scss files. You'll have to make the conversion manually.
Can keep my css files and import what I need of sass files, side by side?
Thank you in advance
If you are going to support SASS in your application, consider only replacing the extension of your css files with .sass which will work without any further modification. This is because SASS is a superset of CSS and therefore simple CSS will be fully compatible.
Edit: Would the imported CSS not be of your own but rather from an external package (such as a node module), then removing the .css extension from your import should fix the problem:
#import '~#angular/material/prebuilt-themes/indigo-pink';
#import "~bootswatch/dist/yeti/_variables.scss";
#import "~bootstrap/scss/bootstrap.scss";
#import "~bootswatch/dist/yeti/_bootswatch.scss";
#import '~font-awesome/scss/font-awesome';
In Java8_31 I imported different CSS files like that in my main.css:
#import "style/common/test1.css";
#import "style/common/test2.css";
All files were in the package style/common and it worked great.
Now with the build Java8_40 I did the same thing, but I get the following error message:
Could not find stylesheet:
file:/mypath/../style/common/style/common/test2.css
com.sun.javafx.css.parser.CSSParser handleImport
All my styles from the CSS file test1.css are working. What I was curious about was the fact that my path style/common is showing up two times.
So I tried to change my imports to the following:
#import "style/common/test1.css";
#import "test2.css";
With these imports, both styles of the file test1 and the file test2 are working. But both files are still in the same package.
Whats happening here? Is there a known issue about the #import and probably a problem in the CSSParser?
It actually is a known issue:
https://javafx-jira.kenai.com/browse/RT-40346
There is a temporary fix available and the issue should be fixed in the next build Java8_u60.
The temporary fix can be made in the CSSParser class. Link to the git diff:
http://hg.openjdk.java.net/openjfx/8u-dev/rt/rev/839912277bf0
If you dont want to try the fix or wait for u60, just add all css files to the same folder and import it like that (temporary solution!):
#import "css/test1.css";
#import "test2.css";
#import "test3.css";
#import "testX.css";
Just contributing to the discussion (not directly to your question):
You don't have to explicitly set the full .css file path. All you need is to specify the .css folder and the file name:
Original path:
#import "css/nodes/path/CssFile.css";
Full path without folder specification:
#import "../../path/CssFile.css";
Both work the same. Notice that, in the second example, "../" refers to the path level, not the specific folder name.
So in your case, that would be
#import "../common/test1.css";
I've set up the foundation framework for compilation with Compass. Everything works fine except that changes to the _settings file are not compiled to my app.css.
That's my (nearly) original app.scss file:
#import "settings";
#import "custom/settings";
#import "foundation";
If I make changes to the _settings.scss file, Compass shows me the following information:
>>> Compass is polling for changes. Press Ctrl-C to Stop.
>>> Change detected at 10:23:56 to: _settings.scss
identical stylesheets/app.css
Which means it looks like the #import command is recognized but it doesn't lead to any changes in the compiled app.css. And in fact the CSS isn't changed. The "custom/settings" file is imported and compiled to app.css correctly.
Has anybody an idea or hint for me what's going wrong here?
This would appear to be unsupported except if you're using Ruby or similar.
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import
I have downloaded a nice theme from Bootswatch, but I would like to change some colors. So I got the bootswatch.less and variables.less and compiles a merged file using WinLess.
When I do this I get following error:
undefined #gradient > .vertical-three-colors
I have read an issue on github indicating that one should include: bootstrap.import.less
But I cannot find this in the bootstrap distribution.
Hope you can help.
In my case I had the same problem with _bootswatch.scss.
After yo angular with bootstrap-sass just replace all text in main.scss:
#import "bootstrap-sass-official/assets/stylesheets/bootstrap/mixins/_gradients.scss";
#import "bootstrap.css";
#import "_variables.scss";
#import "_bootswatch.scss";
angularsassbootswatchbootstrap-mixins-gradients
The issue is related to Gradient Mixins missing. Easy way to solve is the download latest source code of bootstrap and import
#import "path\bootstrap-3.3.7\bootstrap-3.3.7\less\mixins\gradients.less";