I tried several times to use #import 'reset' in my sass code. Unfortunately its not importing. The rest of the code sublime highlights and recognise with no problem. What should I do to #import the reset.css through sass?
When #importing CSS files into your SASS, you need to specify file extension (e.g. #import "reset.css";). See documentation.
Note: Importing file with .css extension will result in a real "CSS import" at runtime instead of inline SASS-like import. If you want to inject the contents of the file into your compiled CSS, change file extension to .scss.
Related
I'm trying to make my SCSS files more modular by splitting it into individual partial files. It's all well until suddenly I have a bunch of .css and .css.map files in my partials directory because I've, naturally, saved all of them, and the Sass watcher dutifully compiled all of them too.
How do I achieve a clean structure like Bootstrap's while not having to manually delete every partial .css files? Ideal scenario is that every time I edit and save the partial files, Sass watcher compiles only the main .scss file.
I'm using VS Code on Mac with a Sass watcher plugin. Is it achievable in this environment?
https://sass-lang.com/guide
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. (#import is soon to be deprecated, with a move to #use and #forward instead. https://sass-lang.com/documentation/at-rules/import)
Thanks Arkellys.
Ideally you have a main .scss file, like style.scss for example, and then the other partials exist, like _header.scss for example.
Once you have a partial like that, it's prudent to import it in the main .scss file, at the top of the file. In this case, it would be #import 'header';
Notice that we do not import the underscore...
If you don't have any errors after this, and it's still not compiling then check whether you have properly referenced the compiled css in the head of your html.
I am working on Asp.net Core With Angular 6 Project
I installed ngx-admin template to angular Project
then includes scss style in my global style like this
#import '~#nebular/theme/styles/globals';
#include nb-install() {
#include nb-theme-global();
};
when I run the project I got this error :
Microsoft.AspNetCore.SpaServices[0]
Including .css files with #import is non-standard behaviour which will be removed in future versions of LibSass.
Use a custom importer to maintain this behaviour. Check your implementations documentation on how to create a custom importer.
any Help !?
This error indicates you are loading a CSS file. It's possible one of you above imports is importing a CSS file.
#import "foo.css";
Which basically is converting it to.
#import url(foo.css);
If you want to import the contents of a CSS file into the output CSS then it's recommended just reference the CSS file directly in your angular.json in the "styles": [] section.
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.
Using Sass (SCSS) / Compass, is it possible to import some CSS/SCSS into your code from an externally hosted file?
I am hosting a jQuery plugin on a CDN and want to keep the CSS in the same location so I don't lose it. However, I'd also like to have the option to be able to pull the CSS into my code and have it compile within my main CSS rather than pulling in an extra CSS file in my HTML. Is this possible?
For those of you who came here looking for a way of importing a CDN as a sass #import I found the answer here: https://github.com/webpack-contrib/sass-loader/issues/246
This is how you do it (using bootstrap as an example):
styles.scss
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css);
Sass will not compile any files from a remote location, all files must be accessible from the filesystem (local hard disk, shared network drive, mounted drive, etc.).
Sass also does not compile CSS files at all. https://github.com/nex3/sass/issues/556
#import "my.css";
Compiles to
#import "my.css";
Perhaps you might be interested in Compass extensions?
You sure can. In this context, it works exactly as the standard CSS #import rule. Just give it a URL to the CDN-hosted CSS file.
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import
#import url("http://fonts.googleapis.com/css?family=#{$family}");
Imports where the URL ends with .css.
#import "theme.css";
Imports where the URL begins http:// or https://.
#import "http://fonts.googleapis.com/css?family=Droid+Sans";
Imports where the URL is written as a url().
#import url(theme);
Imports that have media queries.
#import "landscape" screen and (orientation: landscape);
Yes, you can import external css file using PostCSS Import URL Plugin. It will pull the external CSS into your code, so you could compile it within your main CSS.
#import url('https://example.com/path/filename.scss');
Use import statement to import an external scss file to you local.
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.