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
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
It took me hours to figure out how to patch the below code. The path to it was very much unexpected.
Depending on how I run the tests, and which dir I am in, I find the dotted path to the module to patch changes. This is really bad for unittesting. Which makes me think I am doing it wrong.
The file structure related to the code is:
loaders.py <-- Has a load_palette() func required to be patched
typers.py <-- Has `from . loaders import load_palette`, and calls load_palette()
render.py <-- Has a func that calls the typers func
tests/test_render.py <-- Tests for render which calls a func in render, which calls a func in typers, which calls load_palette()
In the code below __package__.replace('.tests', '.typers.load_palette') takes the current path to the current package which could be:
bar.tests or
foo.bar.tests
or something else
and builds the dotted path relatively so that is is correct. This seems very hackish. How is one supposed to safe guard against these kind of issues?
Ideally the dotted path would be ..typers.load_palette but it did not accept the relative dotted path.
Heres the actual code:
# file: test_render.py
# Depending where one runs the test from, the path is different, so generate it dynamically
#mock.patch(__package__.replace('.tests', '.typers.load_palette'), return_value=mocks.palette)
class render_rule_Tests(SimpleTestCase):
def test_render_preset_rule(self, _): # _ = mocked_load_palette
...
files layout as following:
$ tree issue
issue
├── __init__.py
├── loaders.py
├── renders.py
├── tests
│ ├── __init__.py
│ └── test_render.py
├── run_tests.sh
└── typers.py
1 directory, 7 files
the root package is issue, you should always import modules from issue, and patch issue.xxx.yyy.
then run pytest (or some other unittest tools) from the same path as tests resident.
for example, run_tests.sh is a shell script to run all test cases under tests.
and test_render may be like this
# file: test_render.py
# Depending where one runs the test from, the path is different, so generate it dynamically
#mock.patch('issue.typers.load_palette', return_value=mocks.palette)
class render_rule_Tests(SimpleTestCase):
def test_render_preset_rule(self, _): # _ = mocked_load_palette
...
You can add the path of the "tests" directory using sys.path.insert.
In the top of "tests/test_render.py" add:
import sys
sys.path.insert(0, "<path/to/the/folder/tests/>")
# Depending where one runs the test from, the path is different, so generate it dynamically
#mock.patch(__package__.replace('.tests', '.typers.load_palette'), return_value=mocks.palette)
class render_rule_Tests(SimpleTestCase):
def test_render_preset_rule(self, _): # _ = mocked_load_palette
...
This will add the path in system paths where python interpreter. From there, the python interpreter can locate the relative imports.
Note: The safest option would be to add the absolute path to the tests folder. However, if it's not possible, add the shortest relative path possible.
I'm trying to import the stylesheet like this #import"../../../../styles/forms.scss";
But I get this error:
ERROR in Module build failed (from ./node_modules/sass-loader/dist/cjs.js):`
SassError: Can't find stylesheet to import.`
1 │ #import"../../../styles/variables.scss";
(it goes back three times instead of four like in my path)
Then when I go back once more (just to test) "../../../../../styles/forms.scss", VS Code goes back 5 times. I know the path I'm typing is right. I am using Angular if it matters.
Apparently I imported variables.scss within my forms.scss file and when I called forms.scss one level deeper, it couldn't find variables.scss with the path I specified in forms.scss.
Now I removed variables.scss from forms.scss and added them separately to each file and it works.
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.
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.