I have been using #import to pull in external stylesheets (animate.css, for instance) into my main, .scss stylesheets for quite some time.
I now discovered that #import is being deprecated and has been replaced with #use. However, I am unable to find a proper example of the syntax #use is expecting when importing external files.
With #import, I would have something like this:
#import url('../assets/css/animate.css');
The above would go grab the animate.css file in my /assets/css/ directory, and embed it into my main .scss stylesheet.
From the documentation here, https://sass-lang.com/documentation/at-rules/use, I see that #use is expecting modules to be loaded via their namespace, and to create a namespace from an external resource, I should use:
#use '<url>' as <namespace>;
So I tried the following:
#use '../assets/css/animate.css' as animation;
However, that actually causes an error when compiling, and even if it did not, what am I supposed to do with 'animation' once it is a namespace?
Should I just go back to including separate, individual stylesheets in the <head>, or has someone out there figured out how to make #use work in the way I was using #import before?
Related
I want to use bootstrap (v.5) navbar for a Gatsby project. In principle, it is possible to load components that only belong to the navbar. However, I can't find any information about which components belong to the navbar.
So far these I have these imports but not yet working unfortunately:
global.scss
#import "../../node_modules/bootstrap/scss/functions";
#import "../../node_modules/bootstrap/scss/variables";
#import "../../node_modules/bootstrap/scss/mixins";
#import "../../node_modules/bootstrap/scss/_nav";
#import "../../node_modules/bootstrap/scss/_navbar";
Has anyone done this before? Do you know which components need to be imported to make it work?
Thanks for any help!
I importing it to gatsby-browser.js. Shouldn't it be here?
Yes, that's one option. As well as importing it in the Layout component as the Standard Styling with Global CSS Files suggests.
The problem I guess is the path you're using. From the gatsby-browser.js there's no ../.. path hence the route and the asset is broken.
Try playing around with the path but I bet you can do directly something like:
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/mixins";
#import "bootstrap/scss/_nav";
#import "bootstrap/scss/_navbar";
Note that ./ should also work in the same way so try playing around with the relativity of the paths.
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.
We have Webpack for our project and we need to customize a great amount of things. I.E. we need to create our own theme. According to the docs, I should have:
#import 'theme/_import';
#import '~uikit/src/scss/variables';
#import '~uikit/src/scss/mixins';
#import "~uikit/src/scss/uikit";
Where the theme folder is a copy of uikit/src/scss/theme. However, I get an error:
Undefined variable: "$global-muted-background".
So what should I do in this situation?
Did I rightfully copy that theme folder? Is it meant for copy-paste and then modification? If yes, what do I import before that folder so that the necessary variables are declared?
Should I copy the whole variables-theme.scss file and modify it instead? In that case, what's the purpose of splitting each component's variables into files, as the docs suggest? Also, everything would be a mess.
Where should I put my custom global variables? In theme/variables and then import them in theme/_import?
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.
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.