I am trying to start using #use and #forward instead of #include but I am running into an issue with getting the variables to be found. I have the following folder structure:
sass/styles.scss
sass/components/_index.scss
sass/components/_general.scss
sass/config/_index.scss
sass/config/_colors.scss
In the sass/styles.scss file I have
#use "config";
#use "components";
In the sass/components/_index.scss file I have
#forward "general";
In the sass/components/_general.scss file I have
body {
color: config.$brand-text;
}
In the sass/config/_index.scss file I have
#forward "colors";
In the sass/config/_colors.scss file I have
$brand-text: #f0f0f0;
When I try to run Webpack using dart-sass I get the following error
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: There is no module with the namespace "config".
╷
3 │ color: config.$brand-text;
│ ^^^^^^^^^^^^^
╵
sass/components/_structure.scss 3:10 #use
sass/components/_index.scss 3:1 #use
Sites/test/sass/styles.scss 2:1
If I move the body css to the styles.scss file everything compiles fine. What am I doing wrong?
Thanks for the help.
Related
I have a jekyll based blog. When I try to build it I get this error:
...
Generating...
Jekyll Feed: Generating feed for posts
Warning on line 1, column 1 of /home/john/Projects/blackblog/assets/css/index.sass:
This selector doesn't have any properties and won't be rendered.
╷
1 │ ---
│ ^^^
╵
Warning on line 2, column 1 of /home/john/Projects/blackblog/assets/css/index.sass:
This selector doesn't have any properties and won't be rendered.
╷
2 │ ---
│ ^^^
╵
Error: This file is already being loaded.
┌──> /home/john/Projects/blackblog/assets/css/index.sass
4 │ #import index, font, basic, layout
│ ^^^^^ new load
╵
┌──> /home/john/Projects/blackblog/assets/css/classes.sass
1 │ #import index, highlight
│ ━━━━━ original load
╵
/home/john/Projects/blackblog/assets/css/index.sass 4:9 #import
/home/john/Projects/blackblog/assets/css/classes.sass 1:9 root stylesheet
Conversion error: Jekyll::Converters::Sass encountered an error while converting 'assets/css/classes.sass':
This file is already being loaded.
...
This code of whole site: github.com/yagarea/blackblog.
What should I fix to make my site build ?
Thank you for help
Cause of this issue was that I had file name index.sass in _sass and in assets. This was not issue in until jekyll-sass-converter version 3.0.
I renamed one file to main.sass. I brought a lot of other issues but it was easy fix because build log tells you what to do to fix it.
Not really a bug. This is how it happened:
index.sass has front matter. Jekyll read file as string, process and remove the front matter, then start to compile an input “string”.
index.sass imports index.sass, according to sass spec, the relative import of itself hits before load path, and now we are importing the same file which technically is a circular import. When sass read the same input directly from disk, it knows nothing about the Jekyll front matter and would give up with a syntax error.
One way to address it can be write a custom importer that checks for front matter in each imported partials, and compile it with Jekyll before read as sass partials. However, this has significant drawbacks that isn’t worth doing:
Jekyll’s sass implementation has never allowed partials to have front matters.
Allowing front matter in partials would lead to slower compilation performance as every partial need to be preprocessed by Jekyll, and then passed through protobuf via stdio as a string rather than dart-sass-embedded directly read file from disk.
Even if we allow front matter in partials, it would still be circular import, and user would just get a different error message.
Source: github.com/jekyll/jekyll/issues/9265
I'm unable to build .css file from scss no matter what I try.
I get the following error:
Error: Invalid CSS after " color: c": expected expression (e.g. 1px, bold), was ".$accent-color;"
on line 4 of sass/c:\MAMP\htdocs\testowy\sass\styles.scss
color: c.$accent-color;
The files I'm using:
_colors.scss:
$accent-color: #535353;
styles.scss:
#use 'uses/colors' as c;
body {
color: c.$accent-color;
}
I'm using Visual Studio Code and I have tried two different compiler extensions.
File structure:
I'm trying to set global variables in one file and then use these variables in all other scss files throughout the application. When I set the variables I can use them in that specific file but not others. I am using the '#use' method instead of '#import' as the sass docs recommended it however it seems the '#import' method would achieve what I need however I need a workaround for the long term. Finally, I tried using the '#forward' method but could not see any change and I got the same errors.
app.scss
#use 'layouts/variables.scss';
#use 'layouts/forms.scss';
_variables.scss
$ds-black: #212121;
_forms.scss
input
{
border: 1px solid $ds-black;
}
Console output when compiling:
Error: Undefined variable.
╷
14 │ border: 1px solid $ds-black;
│ ^^^^^^^^^
╵
resources\css\layouts\_forms.scss 14:23 #use
resources\css\app.scss 4:1 root stylesheet
I tried using the ' !global ' attribute however I got this error as well as the previous
Deprecation Warning: As of Dart Sass 2.0.0, !global assignments won't be able to
declare new variables. Since this assignment is at the root of the stylesheet,
the !global flag is unnecessary and can safely be removed.
╷
9 │ $ds-black: #212121 !global;
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
resources\css\layouts\_variables.scss 9:1 #use
resources\css\app.scss 3:1 root stylesheet
https://sass-lang.com/documentation/at-rules/use#choosing-a-namespace
You could change the use tag to something like
#use 'layouts/variables' as *;
or
#use 'layouts/variables';
//and then
input
{
border: 1px solid variables.$ds-black;
}
If you want to use the new Sass module system and have stylesheets that are only used as modules and should not be compiled on their own, you should name your mopules with a leading "_" so the compiler knows to treat them as partials. You then have those two options, Kenyi Larcher showed you.
My filesystem tree looks like this:
C:.
└───static
├───custom_stuff
│ presets.css
│ presets.less
│
└───index
index.less
So, why index.less can't find presets.less, and throws me an error:
'/static/custom_stuff/presets.less' wasn't found. Tried -
/static/custom_stuff/presets.less
I'm using VS Code and this extension to compile LESS to CSS
Your path will be ../custom_stuff/presets.less
I am following this tutorial:
https://medium.com/#tomastrajan/how-to-build-responsive-layouts-with-bootstrap-4-and-angular-6-cfbb108d797b
I reached the point where I have to import styles-variables.scss in the styles file.
However, I keep getting this error:
ERROR in ./src/app/header/header.component.scss Module build failed
(from ./node_modules/sass-loader/lib/loader.js):
#import './styles-variables'; ^
File to import not found or unreadable: ./styles-variables.
in C:\Users\A.G STRANGER\Desktop\MEAN stack\bootstrap_second_step\angular-bootstrap-
example\src\app\header\header.component.scss (line 1, column 1) i
｢wdm｣: Failed to compile.
This is the project structure:
Anyone has any idea where did I make a mistake?
Thank yoou!
Try the following, your relative path is just a bit off.
"../../styles-variables"
Also, make sure that, that file is included in the styles array of your angular.json file or Angular won't include it into your output.
In angular.json, there is a way to have a directory for your variables to beat.
Place this in your angular.json appName => build,
"options": {
...,
"stylePreprocessorOptions": {
"includePaths": [
"./src/sass"
]
},
}