I'm trying to add SCSS to my SvelteKit app. It works within components; however, when I convert the default app.css into a scss file and update the import from the base application, the page loads with a FOUC.
<script context="module">
import '../app.scss'; // Changed from .css
</script>
Is there a way to make SvelteKit precompile the styles and inline them the same way it does standard CSS files?
You can use a SCSS import instead:
<style lang="scss" global>
#import '../app';
</style>
The global keyword is necessary if you're importing a global layout stylesheet. If you leave it out, styles that are imported will be scoped to your component.
Related
I have installed argon design system using npm. And inside the head tag, I have added links from the documentation. But I want to extract it from node modules using mix. And run in webpack so that it renders styles. Please, someone, help with a detailed answer.
import the argon js file (in bootstrap.js for example if you're using the default laravel boilerplate) after popper, jquery and bootstrap:
require("argon-design-system-free/assets/js/argon-design-system");
and the css file (in app.scss if you're using it):
#import "~argon-design-system-free/assets/css/argon-design-system.css";
if you want the nucleo icons import then before the css file:
#import "~argon-design-system-free/assets/css/nucleo-icons.css";
I am trying to customize Bulma by overriding some Sass variables.
In my app.scss file I import the files using the following order:
#import 'node_modules/bulma/sass/utilities/initial-variables';
#import 'node_modules/bulma/sass/utilities/functions';
#import 'bulma_overrides';
#import 'node_modules/bulma/bulma';
The file bulma_overrides.scss includes the following:
$footer-padding: 3rem 1.5rem 3rem;
$footer-background-color: whitesmoke;
My goal was to make the footer a little bit thinner, and I tried to achieve this by changing the padding from 3rem 1.5rem 6rem to 3rem 1.5rem 3rem. At the same time I am changing the backgroud color to whitesmoke.
After running and successfully building:
npm run watch
I reload the page.
Result:
The background color of the footer changes just fine but the padding does not.
At first, I thought that maybe this is not something we can customize, but the official documentation says that we can:
https://bulma.io/documentation/layout/footer/
Any ideas why? By the way, I faced the same issue with another variable in a previous project, and I can't understand what is going on.
PS1: i am using Laravel 5.7 for this project. No changes are done in webpack.mix.js
PS2: i tried multiple browsers (Chrome, Firefox, Safari, Edge[lol]) but no luck.
Your bulma import is already importing "sass/utilities/_all", so this app.scss worked for me just fine:
// Bulma Overrides
#import 'bulma_overrides';
// Bulma
#import '~bulma/bulma';
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.
I am attempting to simply change the colour of the "is-primary" class in bulma. I am attempting to write a scss file to change the values without installing bulma via npm. I am attempting to import by using the cloudfare link, is this possible?
this is my scss file:
#import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4./css/bulma.cssbulma/sass/utilities/initial-variables";
$tech-blue : #2c3e50;
$primary : $tech-blue;
#import "https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.3/css/bulma.css";
This file compiles but I cannot find the corresponding css file and makes no affect to my actual page.
I don't think that this is possible. The variables in use by Bulma are only accessible by SCSS. So you need to build the whole thing to have your colors blend in. The rendered CSS already contains:
a {
color: #00d1b2; /* can't change that later on */
…
}
A feature request for Bulma would be to make those variables accessible via CSS variables. That way you could easily customize the look even with the pre-rendered CSS from the CDN.
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.