Settings: Options > IncludePath not working anymore in VS 2022

[htodep]

Installed product versions

• Visual Studio: 2022
• This extension: 1.14.2

Description

Can't compile stylesheets when i try to import a scss file from the node_modules folder. In VS 2019 the setting "includePath: 'node_modules'" did the trick. In VS 2022 not anymore

Steps to recreate

1. Create base.scss in wwwroot > css >
2. import scss file from node_modules folder:
   example: @import "@progress/kendo-theme-bootstrap/dist/all.scss";
3. Try to save and compile.

Current behavior

Not compiling, gives the error:
Error: Can't find stylesheet to import. @import "@progress/kendo-theme-bootstrap/dist/all.scss"; wwwroot\css\base.scss 45:9 root stylesheet

Expected behavior

Compiling the file with node module files.

[failwyn]

Do you have a sample project that I can use to debug this? I have never used includePath and was never able to get kendo themes to compile with @progress (even with the 2019 WebCompiler), I replaced @progress in all my SCSS files to make it a relative path.

[htodep]

No sorry, I don't have a sample project. I just want to compile scss files from the node modules folder. Now I just copied the folder and placed it inside the wwwroot. Not ideal because I cant update with npm.
It also worked with the 2019 compiler.

[failwyn]

Can you post your compilerconfig.json? How were you getting it to recognize @progress?

// I'd like to get this fixed in 1.14.3 if possible

[htodep]

@failwyn Sorry for the late reaction.
[ { "outputFile": "wwwroot/css/base.css", "inputFile": "wwwroot/css/base.scss", "options": { "includePath": "node_modules" } } ]

And than in my base.scss I could do:
@import "@progress/kendo-theme-bootstrap/scss/all";

[failwyn]

I don't understand how that tells the system what directory @progress refers to... I manually replaced @progress throughout the scss with a relative path, so I would love to understand how this works and fix this issue since it would greatly simplify management of the kendo styles for me.

[htodep]

Maybe it tells where to look for outside the wwwroot of the project.
the kendo files are located in: node_modules/@progress/kendo-theme-bootstrap/scss/all

[failwyn]

Ah! So @progress is a folder name, not a variable! Thank you for that! I'll work on this as soon as I catch up on some work, work (hopefully by the end of the week).

[failwyn]

Looking through the kendo scss files, they always have a ~ before @progress; can you try this and let me know if it works? If it doesn't I'll take the time to setup a project using the default kendo scss theme files.

@import "~@progress/kendo-theme-bootstrap/scss/all";

[htodep]

No sorry, doesn't work. Tried the following:
~@progress/
~node_modules/@progress/

[failwyn]

Okay, I'll set something up for testing; it appears to be implemented correctly in the code, I just don't see anywhere that says where the base folder is for the include path.

[htodep]

Thank you for looking into it 👍

[failwyn]

Sorry, I totally overlooked something... The Dart Sass option is called loadPaths instead of includePath and the path is from the root of the project. I tested in my project and it appears to be working.

I have to take a look at how to handle options between Node Sass and Dart Sass; the right way to fix it would probably be a breaking change that would require people to edit their overrides in the defaults.json file since I would have to add a nodesass node to it so that we can have the proper defaults available for each compiler and people would be able to see what the available options are.

[htodep]

So I need to use loadpaths? Or wait for an update? I don't care about the breaking change or using different settings if I know which one I need to use ;)
Thanks again for how fast you are checking this out!

[failwyn]

If you use loadPaths it should work in the current version, I am working on an update that will have different sections in defaults.json for NodeSass and Sass (Dart Sass), right now it's a bit confusing with all of the options under one section.

// hopefully I don't break anything else in the process
// I wish VisualStudio Marketplace supported PreRelease channels and would give access to different versions like nuget does...

[htodep]

Oké Nice. Will check tomorrow and see if everything compiles with this option.
Would love to have that option too. The old compiler for 2019 didn't work with the latest bootstrap either because of some css variable that we're to fancy and modern. Glad that this extension is being maintained

[failwyn]

It’s critical for my company, so I’ll be maintaining it the best I can until Visual Studio has native support for it.

[htodep]

so i checked it out. and it's trying to compile but now I have a different error: do you know what it is?
Error Error: $color: null is not a color. ╷ 1219 │ "r": red($color), │ ^^^^^^^^^^^ ╵ @progress\kendo-theme-bootstrap\dist\all.scss 1219:10 luminance() @progress\kendo-theme-bootstrap\dist\all.scss 448:12 contrast-wcag() @progress\kendo-theme-bootstrap\dist\all.scss 14001:24 @content @progress\kendo-theme-bootstrap\dist\all.scss 515:9 exports() @progress\kendo-theme-bootstrap\dist\all.scss 13927:1 @import wwwroot\css\base.scss 49:9 root stylesheet *** C:\***\***\***\***\wwwroot\css\base.scss 0

[htodep]

@failwyn
So i found my problem. package.json wasn't updated to the latest kendo bootstrap version. manually updated the version and did a npm update in cmd. everything compiled correctly. Thank you for helping me out!

[failwyn]

That's great to hear! I'm glad everything is working now!

[kkembel]

I'm not sure if this helps at all, but I had the same challenge with kendo's source files referencing their @import lines using tildes, and I couldn't get the includePath of "node_modules" to work for me using Mads extension. I just setup gulp to compile kendo using node-sass and set the importer to an instance of node-sass-tilde-importer and it handles the ~@progress references as /node_modules/@progress.

@failwyn, I haven't tried out your extension yet but saw your extension config allows for useNodeSass:true, is this something you've got working now using includePath:node_modules with useNodeSass:true? Is it possible to add something to the config like "importer":"node-sass-tilde-importer" to load any importer when compiling using the extension?

[failwyn]

I never tried using includePaths with Node Sass, but since Node Sass is no longer being maintained, I'm hesitant to spend time enhancing it, I mainly left it there as a bridge for people that aren't ready to move to Dart Sass yet. I am currently compiling all of the Kendo SASS themes in my projects using Dart Sass and the loadPaths property. Once I catch up on some work, I'll test if includePaths works for me using the UseNodeSass option.

Is there a reason you want to use Node Sass over Dart Sass?

[kkembel]

No good reason, just habit. I'll try a switch to dart with your extension and see how loadPaths goes. Sounds better than what I'm doing. PS, thanks for forking this, your work is much appreciated!

[terrysmith-fiworks]

Hi, I'm having this same issue trying to use WebCompiler in VS 2022 with the latest Kendo Bootstrap theme. Can you please share what the final settings should look like?

My compilerconfig.json looks like this after adding "includePaths" as what I interpreted from above:

[
   {
      "outputFile": "Content/fiworks/all.css",
      "inputFile": "Content/fiworks/all.scss",
      "options": { "includePaths": "node_modules" }
   }
]

When all.scss contains:
@import "@progress/kendo-theme-bootstrap/scss/all";
I get "Error: Can't find stylesheet to import.".

If I change it to the full path:
@import "../../node_modules/@progress/kendo-theme-bootstrap/scss/all";
It finds that file but once it gets into the dependency on kendo-theme-default it fails with the same problem:

Error: Can't find stylesheet to import.
@import "~@progress/kendo-theme-default/scss/core/functions/_index.scss";
  │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  node_modules\@progress\kendo-theme-bootstrap\scss\core\functions\_index.scss 1:9  @import
  node_modules\@progress\kendo-theme-bootstrap\scss\core\_index.scss 1:9            @import
  node_modules\@progress\kendo-theme-bootstrap\scss\index.scss 1:9                  @import
  node_modules\@progress\kendo-theme-bootstrap\scss\all.scss 1:9                    @import

I've tried variations on includePaths but I'm missing something with the config.

Thanks!

[failwyn]

It should be loadPaths, include paths was a property if the old sass compiler.

[terrysmith-fiworks]

Thank you for your quick response. I thought it was a singular vs plural thing, and I missed the "load" part. It's still not working for me though. Should the config look like this:

[
   {
      "outputFile": "Content/fiworks/all.css",
      "inputFile": "Content/fiworks/all.scss",
      "options": { "loadPaths": "node_modules" }
   }
]

or this:

[
   {
      "outputFile": "Content/fiworks/all.css",
      "inputFile": "Content/fiworks/all.scss",
      "compilers": 
      {
         "sass": 
         {
            "loadPaths": "node_modules"
         }
      }
   }
]

Or something different? I've updated my compilerconfig.json.defaults and replaced the sass section with the "sass" and "nodesass" sections as you described on Overview page:
https://marketplace.visualstudio.com/items?itemName=Failwyn.WebCompiler64&ssr=false#overview

But even when I change loadPaths in the defaults file itself to "node_modules" it still doesn't work for me.

[failwyn]

Can you describe your project structure or upload a small sample application? I’d be happy to help get it working for you.

[terrysmith-fiworks]

The project structure looks like this:

\Website
   ...
   \Content\fiworks\all.scss   <- "Master" scss that pulls in everything else in proper order.
   ...
   \node_modules
      \@progress
         \kendo-theme-bootstrap
         \kendo-theme-default
compilerconfig.json
compilerconfig.json.defaults

With some trial and error I found that this is the proper place to put loadPaths. In other words, it doesn't match the structure of the defaults file as I asked further above.

[
   {
      "outputFile": "Content/fiworks/all.css",
      "inputFile": "Content/fiworks/all.scss",
      "options": { "loadPaths": "node_modules" }
   }
]

So now I'm back to the tilde problem. When my all.scss as the import with the tilde:
@import "~@progress/kendo-theme-bootstrap/scss/all";
I get "Can't find stylesheet to import." for that line.

When I remove the tilde it starts importing that file but then when it gets to the inner dependency on kendo-theme-default it fails on that import which has the tilde again:
@import "~@progress/kendo-theme-default/scss/core/functions/_index.scss";

In the thread above, @htodep seemed to say that this tilde issue was resolved by upgrading bootstrap, but I'm using bootstrap 5.1.3.

[failwyn]

Based on this issue, it doesn't sound like Dart Sass supports the tilde; does it work if you do a Replace in Files for "~@progress" with "@progress"?

sass/dart-sass#801
sass/sass#2350

[molequetu]

Any update on this;

I am trying to use WebCompiler in order to compile my SCSS kendo files, and I am stuck as it seems with the ~ tilde problem;

@failwyn if we replace the ~ with '', how then we gonna update; I mean new update will override again namespaces, wont they;

My project setup, simple. All files on root

node_modules (@progress/kendo-theme-bootstrap": "^5.5.0") related dependencies
kendo_scss(generated throw themebuilder)
compiler.config.json

`[
  {
    "outputFile": "backoffice-kendo-custom-sass-theme.css",
    "inputFile": "backoffice-kendo-custom-sass-theme.scss",
    "options": { "loadPaths": "node_modules" }
  }
]

Have the same issue as previous ones mentioned; If i remove from my first import
@import "~@progress/kendo-theme-bootstrap/scss/typography/_index.scss";
the tidle, it then has issues with the dependencies that have tilde and I 'do not' control`

[molequetu]

quick update on this; made my compilation work;

As mentioned, I started by using the kendo ThemeBuilder(where I had selected Bootstrap 4) from the addition config. So, at the end I had a .scss using tilde on imports generated. And installed the latest kendo-theme-bootstrap(5.5.0)

Now I downgraded to 4.36.0 kendo-theme-bootstrap (because I remembered that I used the bootstrap 4 in theme builder) and it works as expected, by removing the tilde from my custom .scss

The only problem was that in the auto-generated .scss file from the ThemeBuilder, some imports could not be found on the corresponding 4.36.0 package.

`/*@import "@progress/kendo-theme-bootstrap/scss/datepicker/_index.scss";*/
/*@import "@progress/kendo-theme-bootstrap/scss/timepicker/_index.scss";*/

Seems like that imports does not exist in the corresponding node_modules folder, and the only one related that exists is the dateTime component(so datetimepicker, datePicker, timePicker) does not exist but only dateTime exists

[failwyn]

@molequetu Glad to hear you got it working! I got my kendo themes to compile using loadPaths, but ended up reverting to modifying the import statements to make intellisense work again and stop Visual Studio from reporting undeclared variable usage... I really wish they would add native SASS support to Visual Studio.

[molequetu]

@failwyn what do you mean ended up reverting and modifying the import statements; Can you share with me your project setup and kendo-theme-bootstrap version usage;

After my workaround that I explained before, using kendo-theme-bootstrap 4.36.0, withe the .scss generated from theme builder, my final styles(css) are not the same by using the auto generated from theme builder. So, maybe I have to use /kendo-theme-bootstrap version >5, as of https://docs.telerik.com/kendo-ui/styles-and-layout/sass-themes/compatibility, where I use right now R1 2022 SP2 so have to use >5.3.0, but as the problem exists with the tilde don't know how to address it quickly.

[airwedge1]

Anyone figure out a resolution with the tilde thing?

[failwyn]

It sounds like Kendo is going to be making changes to the themes to make them more compatible with .net compilers; they actually mentioned this vsix, so maybe I can put in a support ticket and get more info, or maybe give some suggestions to make it more compatible; the only thing I had to do to make it compile and have intellisense work was to convert the ~@progress imports to relative paths.

telerik/kendo-themes#3889

[molequetu]

I ended up using gulp to preprocess the kendo sass files. Replacing the tildle did not worked for me, as you have to replace not only your own imports but all imports that are included on kendo sass file sources on node_modules, and after updating the themes you will have to do the same thing to work(maybe)