I declare an SCSS variable $black in my file general.scss and in default.vue I want to use it but I have this error SassError: Undefined variable "$black".
I'm using Nuxt.js!
screenshot variable declaration
screenshot variable utilisation
screenshot organisation folder
If you have any response or help for me, thank you and sorry for my bad english :) !
[EDIT]
I don't know why but my account is blocked, so the solution of my problemes is in this tutorial
Thanks all for your times (love)
Try importing your file without using url(). Like this:
#import '#/assets/style/general.scss';
I hope that solves your issue, it worked for me.
Also, if you use those variables in a lot of different components you could consider using the #nuxtjs/style-resources module to automatically import it everywhere.
I used the Sass #use rule, because support for the #import rule will be dropped according to this timeline.
Example:
<style lang="scss">
#use '#/assets/style/general.scss';
h2 {
color: general.$black;
}
</style>
By default, the namespace is just the last component of the module’s URL.
Related
I'm migrating a Stylus library to SCSS since Angular 12 has deprecated Stylus and I'm in that impacted 0.3%. I've run into something we were doing that I'm not sure how to convert to SCSS—maybe it's impossible.
Let me lay this out simply: I work on several projects that all use loads of the same styles, so we put those styles together into one style sheet in its own NPM package. We can then just grab #import '#company/design/styles'; and suddenly we've got all of our regular styles and variables and mixins available in the project, or we can import #import '#company/package/styles/common'; for just the variables and mixins.
The thing is, our projects might need to configure the library before we import it. Suppose the library contains this bit:
// #company/package/styles/_forms.scss
input:invalid {
background: url('/assets/input-error.svg') no-repeat center right;
}
Not every project will have /assets/input-error.svg at that exact location. Maybe one of my projects has to use /subfolder/static/input-error.svg.
I could include this then overwrite input:invalid { background-image: url(...) } to supply it with the correct location, but there may be many references to this particular file and many other assets on top of that to correct. So we instead, in our Stylus library, we introduced an $asset-input-error variable that points to /assets/input-error.svg by default and did something like this:
// #company/package/styles/_forms.scss
input:invalid {
background: url($asset-input-error) no-repeat center right;
}
// the local project
$asset-input-error: '/subfolder/static/input-error.svg';
#import '#company/package/styles';
The above is heavily simplified and isn't actually legitimate SCSS, but I hope it conveys what we're trying to do: we want to set up what are effectively environment variables in our SCSS, include the common style sheet, and have it use those variables.
The thing is, I'm not sure what the legitimate or idiomatic approach is to do this in SCSS. Unlike Stylus, which has a global scope for its variables, SCSS would have me #use '../config'; and reference config.$asset-input-error, and from outside the library there's no way I see to change the configuration to point that asset to a different location. I'm sure SCSS has a way for me to do this, but I'm not sure what it is. Do I convert the entire library into a giant mixin to which I pass optional configuration? Do I do something with global variables? Something else?
How can I provide variables to my SCSS style sheet to configure it as part of including it in a project?
Ultimately the end goal here is just to be able to say to the library things like: “the assets to reference are here” (very important) or “the error color is this in this particuilar project” (less important).
Using #import
You can use global variables declared before the #import as you stated.
SCSS Documentation for this method
#company/package/styles/_forms.scss
$asset-input-error: '/subfolder/static/input-error.svg' !default;
input:invalid {
background: url($asset-input-error) no-repeat center right;
}
#company/package/styles/styles.scss
#import 'forms';
local.scss
$asset-input-error: '/different/path/input-error.svg';
#import '#company/package/styles';
CodeSandbox Demo
Using #use [...] with
You can also hop aboard the #use train if you prefer to future-proof your library.
SCSS Documentation for this method
SCSS Documentation for using mixins
SCSS Documentation for configuring forwards
#company/package/styles/_forms.scss
$asset-input-error: '/subfolder/static/input-error.svg' !default;
input:invalid {
background: url($asset-input-error) no-repeat center right;
}
#company/package/styles/styles.scss
#forward 'forms';
local.scss
#use 'styles' with (
$asset-input-error: '/different/path/input-error.svg'
);
Sadly CodeSandbox and StackBlitz don't support dart-sass, so I don't have a live demo for this but I tested it on the latest version of sass from npm.
I am planning to use SASS by creating [_partial] and use [#import].
Question: How can I create selectors with no declaration?.
I will of course populate the selectors with declaration,
but that input comes from the other [_partials]. Have I understood correctly that SASS will delete a selector that has no declaration? Is there any workaround?
My partials structure looks as below.
#import '_1-partial_variables.sass'
#import '_2-partial_divs_only.sass'
#import '_3-partial_wrapper.sass'
#import '_4-partial_divs_layout.sass'
What I have tried so far:
In [_2-partial_divs_only.sass] I have tried:
.div-1
(the build executes without errors, but the div itself is not created).
.div-1 {};
(the build script says, "Error: Expected newline".
What about same scenarios using SCSS as source file?
The results are exactly same, a selector with blank declaration, is not created.
My build-line is:
sass --no-source-map main.sass main.css
Seems this works in order for the SASS compiler to create the selector [.div-1]:
.div-1
/*! keep */
This works also:
.div-1
/**/
As the source is a SASS file, I do not add [{}] nor [;].
Those characters are being created automatically when building from SASS to CSS.
Is it possible to share variables between files, without importing my variables file in every file? Here's an example:
Variables.scss
$primary: #0000FF;
HelpPage.scss
#help-page-container {
background: $primary;
}
Core.scss
#import "Variables.scss";
#import "HelpPage.scss";
Core.scss is the only file that gets compiled. All my single-page files, common CSS classes, and Variables.scss is included in this file.
If I want to use $primary inside my HelpPage.scss file, I would need to either do:
#import "Variables.scss";
or
/// <reference path="Variables.scss" />
Either one works. However, if I have 20 pages, I would need to import/reference the variables file at the top of each and every one of them, just to make Visual Studio happy and not throw a
Undeclared variable
error at me.
Have you read this?
http://thesassway.com/beginner/how-to-structure-a-sass-project
Essentially you would import _variables.scss and _help-page.scss into core.scss
This way helppage partial has access to all variables.
I'm trying to compile my scss in a css file.
Everything is working except this :
#import url('http://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700');
In my css, I've got the same thing :
#import url("http://fonts.googleapis.com/css?family=Roboto:400,500,700,300");
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%} ......
Here my gulp task :
return sass(vendorFiles.scss.app, {
compass: true,
style: 'compressed'
})
.on('error', sass.logError)
.pipe(rename('app.css'))
.pipe(gulp.dest(distPaths.css));
});
I tried without quotes, without url, none of this worked.
Others imports work but when I try with #import url, with any url, it doesn't matter, it wont work.
Any ideas?
What do you mean by it won't work? Do you get a sass error?
Try https --- note the "s"
Is it the first line of your css?
Where and how do you use Roboto - I see no reference to it?
You are not supposed to use #import in as it can cause render block issues, and i did tried the #import in VSCode with sass-lint. They showed an error.
I would suggest using in this way :
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
Problem: This method of calling CSS is bad because it adds to the time that it takes to load your css before your page can load.
Solution: Locate the # import calls and replace them.
Detection: Use the pagespeed tool. In the left hand column one of the items is "Avoid # CSS import". If you have a green checkmark, no #imports were found. If found, there will be a red "x".
Details: CSS imports look like this and will usually be near the top of the file.
#import url("style.css")
Rather than call that css file using the import method it is better to just keep that additional css in just one file (copy and paste the imported css into the original css file).
For more info: Go through this link. Dont use #import
I have three Sass files in the same directory: _include.scss, app.scss and partials.scss.
Both app.scss and partials.scss have an import at the first line:
#import "include";
And at the first line in _include.scss:
#import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
My gulpfile.js looks like this:
var elixir = require('laravel-elixir');
elixir(function(mix) {
mix.sass([
'app.scss',
'partials.scss'
]);
});
Bootstrap's and my own Sass code is combined into the same CSS file (public/css/app.css). The only problem is that Bootstrap's CSS is inserted after app.scss, so any changes I make will be overridden by Bootstrap if they collide. partials.scss is inserted at the correctly at the bottom.
What causes this? I have, as far as I can see, the exact same setup in other projects without this problem.
The error lies in the doubled #import "include"; statement:
Both app.scss and partials.scss have an import at the first line
There is an issue for import once semantics in SASS, but it is still not resolved. I would suggest to include the library only in one place until the issue is resolved.
Update: There is an informative blog post on the topic as well, which might help you to find a workaround that suits you.