I got an Undefined variable error when i use sass #use in vite
demo is here codesandbox
I don't know what's wrong with my configuration for sass
You need to use #forward instead of #use to re-export variables.
src/styles/index.scss
- #use "./var.scss";
+ #forward "./var.scss";
Related
I'm using some copied SASS code to start a project. It was written with #import for Ruby SASS, and I've changed it to #use for Dart SASS.
style.scss
// base
#use 'css/var' as *;
#use 'css/base' as *;
#use 'css/typography' as *;
// layouts
#use 'css/container' as *;
#use 'css/grid' as *;
css/_var.scss
$baseFontSize:16 !default;
$baseLineHeight:1.5 !default;
$leading:$baseLineHeight * 1rem !default;
from within the directory that style.scss is in, I ran sass --watch .
I keep getting the error:
Error: Undefined variable. ╷ 10 │ font-size: ($baseFontSize /
16) * 100%; │ ^^^^^^^^^^^^^ ╵
css/_typography.scss 10:17 #use
style.scss 6:1 root stylesheet
I'm using SASS version 1.43.4
If the _typography.scss partial uses Sass variables from css/_var.scss then you need to add a #use "path-to-css/_var.scss" as *; at-rule to the _tyopgraphy.scss partial. I reckon it wouldn't give an error anymore as it will know about that variable reference.
When you load css/_var.scss to the base stylesheet to be compiled you can use those variables in that style.scss file, but the partials being loaded into the main file will have to have #use at-rules if they use variables/mixins/etc and haven't been loaded already.
Note: You can also look into using index files with #use at-rules which allows you to load a directory of partials using a single #use call
I'm a bit newer to sass, but when I was learning it the Sass website said to start using #use instead of import, so after a lot of trial and error I finally figured out how to use it pretty much the same as import.
Note: I'm using Prepros for compiling.
I have this mixin in it's own file inside of a mixins folder:
// scss/mixins/_flex.scss
#mixin flex($flex-flow: row, $justify-content: center, $align-items: center) {
display: flex;
justify-content: $justify-content;
align-items: $align-items;
flex-flow: $flex-flow;
}
I tried #useing it in my main _mixins.scss file:
// scss/_mixins.scss
#use "mixins/flex" as *;
Then I tried using it in another one of my files containing common elements:
// scss/_common_elements.scss
#use "mixins" as *;
.flex {
#include flex();
}
Then I receive the error inside of Prepros log: Undefined Mixin where I call the #include flex(); line (inside of _common_elements.scss)
It was working until I decided to put the mixins in their own separate folder, but this is the same as how it's setup inside of Bootstraps source code.
This whole process of using #use has been really confusing.
Does anyone know why I might be getting this error?
I managed to fix it!
ALSO: If you can help me edit this question / answer to better explain it with proper language, please post suggestions and I'll update it.
In the _mixins.scss file I needed to use #forward "mixins/flex" instead of #use "mixins/flex" as *;:
Like this:
// scss/_mixins.scss
#forward "mixins/flex";
#forward "mixins/overlay";
#forward "mixins/etc...";
I wish they would've made this something more clear on the actual sass #use documentation.
Here are the actual docs to #forward.
to use #use command and other new features of sass, you need to install dart sass, and not node-sass;
https://www.npmjs.com/package/sass
I have installed material-selected as instructed here, by running the command:
npm install #material/select
I have included the html for select and set the width of it. And in my sass file I have imported material styling like suggested in the documentation:
#use "#material/list/mdc-list";
#use "#material/menu-surface/mdc-menu-surface";
#use "#material/menu/mdc-menu";
#use "#material/select/mdc-select";
But, when I am trying to build my project with parcel, I get the error:
Can't find stylesheet to import.
#use "#material/list/mdc-list";
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
src/scss/app.scss 1:1 root stylesheet
How am I suppose to import this stylesheets?
I have tried with tilde operator as well:
#use "~#material/list/mdc-list";
#use "~#material/menu-surface/mdc-menu-surface";
#use "~#material/menu/mdc-menu";
#use "~#material/select/mdc-select";
But, that didn't help either, then I got::
#use "#material/density/functions" as density-functions;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
node_modules/#material/list/_mixins.scss 22:1 #use
node_modules/#material/list/mdc-list.scss 21:1 #use
src/scss/app.scss 1:1 root stylesheet
Error: Can't find stylesheet to import.
#use "#material/density/functions" as density-functions;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
node_modules/#material/list/_mixins.scss 22:1 #use
node_modules/#material/list/mdc-list.scss 21:1 #use
src/scss/app.scss 1:1 root stylesheet
Also in my vs code editor I get warning that the #use is unknown rule:
Unknown at rule #usescss(unknownAtRules)
I am not sure why do I get that.
When using Parcel bundler you'll also need to provide import path configuration. See Parcel docs for more details on how to configure Sass.
Add .sassrc.js file to your project root folder and include following lines:
const path = require('path')
const CWD = process.cwd()
module.exports = {
"includePaths": [
path.resolve(CWD, 'node_modules'),
path.resolve(CWD, 'src')
]
}
Here is a full example on Glitch.
I am practicing sass in my code editor. When I tried to compile my sass file and built a watcher. I receive:
Jiatongs-MacBook-Pro:6_myLandingPage_starter jiatongli$ sass --watch sass:css
Error: Undefined variable.
background-color: $white
^^^^^^
sass/modules/_navbar.sass 3:21 #import
sass/modules/_modules-dir.sass 1:9 #import
sass/app.sass 3:9 root stylesheet
Because I cannoStackOverflow files here on stackoverflow, I link my github repository which is:
https://github.com/riederleeDEV/SASS-project.git.
It seems like the sass watcher cannot capture my file import and I do
not know where went wrong
Here is the command I used: sass --watch SASS:CSS(the command should not have any error)
After I checked the file, I discovered that there is nothing wrong with my app.sass import nor the typo. Just want to ask where I went wrong?
Try this:
<···· Move variables to top
#import "base/base-dir" |
#import "layout/layout-dir" |
#import "modules/modules-dir" |
|
#import "variables" ············
#import "mixins.sass"
I want to be able to "#import" a file with SASS depending on a Grunt parameter.
With grunt I want to:
grunt someTask --skinName=yellow
Inside app.scss I want to somehow use this parameter:
#import "$skinName";
Some context...
This skinName.scss contains a lot of SASS variables with color codes so that I can easily change colors all over the app. I Should be included before all my SASS #imports.
You could solve this with another scss file that is written by grunt during the build process:
grunt.registerTask('skin', function () {
grunt.file.write('skin.scss', '#import "' + grunt.option('skinName') + '";');
});
Then simply import the skin.scss in your app.scss.