Bootstrap SASS Does Not Compile

[scottkuhl]

trafficstars

Describe the bug The SASS files will not compile using the Web Compiler extension in Visual Studio or using the BuildWebCompiler NuGet package.

To reproduce Steps to reproduce the behavior:

1. Add the package using Libman in Visual Studio.

{ "version": "1.0", "defaultProvider": "unpkg", "libraries": [ { "library": "@progress/[email protected]", "destination": "wwwroot/lib/kendo-theme-bootstrap/" } ] }

2. Add a kendo.scss file that compiles the theme.

@import "../lib/kendo-theme-bootstrap/scss/all";

3. Compile the SASS file using either the Web Compiler extension or the BuildWebCompiler NuGet package.

4. The following error is produced.

File to import not found or unreadable: ~@progress/kendo-theme-default/scss/core/functions/_index.scss.

Expected behavior The SASS files can be compiled from Visual Studio.

Affected package

• theme-bootstrap

Build system information

• OS: Windows

Additional context The last working version was 4.43.0

[joneff]

The answer is rather longish, but the fix is extremely quick.

Previously, we sort of bundled the dependencies of each theme with the theme itself. If you look at the package content of 4.44.0, or any prior version -- https://unpkg.com/browse/@progress/[email protected]/ -- you will see a modules directory that contains the dependencies. When working with everything within the package it's quite easy, because we use relative paths. However, that also breaks the npm model where each dependency should be used from its install location.

With version 5.0.0 we changed that -- we no-longer bundle the dependencies, but use them from their installed location. Since this is npm the location is usually node_modules. There is no single unified way to point to that directory. That's why we went with using tilde (~), which is already supported in webpack and other module bundlers.

That approach, however, it's not supported with web compiler or other vs code extensions for various reasons. Main reason being, you cannot specify the importer option for the sass compiler. What the importer options does is to be used as a resolver when the compiler encounters unknown url or something it cannot import.

I've created a quick gist snippet, while we document this properly, how to compile the themes with gulp -- https://gist.github.com/joneff/29ca55a4942e6efea633b5f99462ba96. Then there is the next step, to have NPM Task Runner extension. That extensions will read trough the gulp file and you can hook the sass task on various lifecycle events like build.

I know this is less than ideal, but it's the only way we can guarantee consistent builds. Also, we are working on improved build from source scenario that should not require custom importers.

[scottkuhl]

Dimitar from Progress also provided the following workaround:

As a workaround you can import the theme from the dist folder instead of the scss one: @import "../lib/kendo-theme-bootstrap/dist/all"; With this change, the theme should be able to compile successfully.

But you also need to delete the all.css file from dist folder as well.

[smchargue]

Also, we are working on improved build from source scenario that should not require custom importers.

Would love to know what/where to look in regards to "improved build from source..." - I'm attempting to download and tweak @progress/[email protected]

I can handle all the scss changes i need to make, but I am absolutely going in circles in terms of setting up an effective build process.

[aschwab]

Hello, after upgrading to Telerik-UI 3.1.0 (and Material-Theme 5.2.0) I also encountered a problem with imports. I'm using LibMan to restore the packages from unpkg and WebCompiler to compile the sass.

First I added the default theme using LibMan:

{
  "version": "1.0",
  "defaultProvider": "unpkg",
  "libraries": [
    {
      "library": "@progress/[email protected]",
      "destination": "Theme/ref/~@progress/kendo-theme-default"
    },
    {
      "library": "@progress/[email protected]",
      "destination": "Theme/base"
    }
  ]
}

WebCompiler offers you to add additional include paths which the Sass-Compiler is looking for. This is where you add the folder where the default-theme was restored.

[
  {
    "outputFile": "wwwroot/css/custom.css",
    "inputFile": "Theme/CustomTheme.scss",
    "options": {
      "loadPaths": "Theme/ref"
    }
  }
]

My CustomTheme.scss includes the material-theme scss like this

@import "base/scss/all.scss";

The Web-Compiler will look inside the folder given with "loadPaths", which should contain your ~@progress folder, it will then be able to import the files.

This is probably not the cleanest way but it does the job. It should also work for the Bootstrap-Theme.

[epetrow]

Here is a project that works, after restoring: BlazorApp1.zip

It should be noted that libman works differently from npm: where as npm would not only download packages and place them in folders, it will also download all needed dependencies, while libman will not.

As such, if you build from source and not dist, you need to specify all packages that are dependencies of @progress/kendo-theme-bootstrap:

{
  "version": "1.0",
  "defaultProvider": "unpkg",
  "libraries": [
    // Bootstrap framework. We use it to source variables
    {
      "library": "[email protected]",
      "destination": "wwwroot/lib/bootstrap/"
    },
    // Starting from v6 we source the icons from this package
    {
      "library": "@progress/[email protected]",
      "destination": "wwwroot/lib/@progress/kendo-font-icons/"
    },
    // Contains all the mixins needed to build the theme
    {
      "library": "@progress/[email protected]",
      "destination": "wwwroot/lib/@progress/kendo-theme-core/"
    },
    // Contains various utility class names
    {
      "library": "@progress/[email protected]",
      "destination": "wwwroot/lib/@progress/kendo-theme-utils/"
    },
    // This is the basis for the theme
    {
      "library": "@progress/[email protected]",
      "destination": "wwwroot/lib/@progress/kendo-theme-default/"
    },
    // The theme itself
    // If you are building from dist and not source, you only need this
    {
      "library": "@progress/[email protected]",
      "destination": "wwwroot/lib/@progress/kendo-theme-bootstrap/"
    }
  ]
}

Note: v5.12.1-dev.1 is the first version that has the fix for tilde imports! When v6 is out, you will need to update the versions.

Then, all you need to do is to have setup compiler config and compiler defaults, and compile your file:

// compilerconfig.json
[
  {
    "outputFile": "wwwroot/css/BlazorSass.css",
    "inputFile": "Styles/BlazorSass.scss"
    // Setting options.includePaths here seems to have no effect!
  }
]

// compilerconfig.json.defaults
{
  "compilers": {
    // other settings omitted for brevity
    "sass": {
      "autoPrefix": "",
      // loadPaths specified here
      "loadPaths": "wwwroot/lib/",
      "style": "expanded",
      "relativeUrls": true,
      "sourceMap": false
    },
    "nodesass": {
      "autoPrefix": "",
      // includePath specified here 
      "includePath": "wwwroot/lib/",
      "indentType": "space",
      "indentWidth": 2,
      "outputStyle": "nested",
      "precision": 5,
      "relativeUrls": true,
      "sourceMapRoot": "",
      "lineFeed": "",
      "sourceMap": false
    },
    // more settings
  }
}

// BlazorSass.scss
$primary: limegreen;

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

Tested on Visual Studio Community v17.4.2 with WebCompiler 2022+ v1.14.9.2.

Can you verify things work on your end?

[Juveniel]

After https://github.com/telerik/kendo-themes/issues/3963 all paths internally used in the kendo themes are normalized to @progress/kendo-theme-default/..., thus the sass loadPaths option can be used in custom build tools for specifying the location of the packages as @epetrow already suggested in the above comment.

Closing this as resolved.