.CSS / .SCSS extension conflict from the link tag helper when EnableTagHelperBundling = false and using AddScssBundle()

tommytayman commented 10 months ago

Background

We're in the process of replacing the Bundle & Minify plug-in with this library since it gives us better bundle flexibility in addition to compiling .sass files. During local development, we want to disable the EnableTagHelperBundling so we can get each file output for debugging specifically for our .js bundles.

Setup

Visual Studio 2022 - 17.8.3
.NET - 8.0 (My application however confirmed on the sample project running .NET Core 3.0)
LigerShark.WebOptimizer.Core - 3.0.396
LigerShark.WebOptimizer.Sass - 3.0.102

Test Setup

Upgrade the references in WebOptimizer.Sass to LigerShark.WebOptimizer.Core (3.0.396)
Open the sample project in this repository and change the Startup.cs from this:

 services.AddWebOptimizer(pipeline =>
{
    // Creates a Sass bundle. Globbing patterns supported.
    pipeline.AddScssBundle("/css/bundle.css", "scss/*.scss");

    // This will compile any Sass file that isn't part of any bundle
    pipeline.CompileScssFiles();
});

to this

services.AddWebOptimizer(pipeline =>
{
    // Creates a Sass bundle. Globbing patterns supported.
    pipeline.AddScssBundle("/css/bundle.css", "scss/*.scss");

    // This will compile any Sass file that isn't part of any bundle
    pipeline.CompileScssFiles();
}, option =>
{
    option.EnableTagHelperBundling = false;
});

Expected Results

Since we want each file to render instead of the single bundle, we should expect to see

<link href="scss/a.scss?v=Hash" rel="stylesheet" />
<link href="scss/b.scss?v=Hash" rel="stylesheet" />

This works due to the request to simply render the individual files that make up this bundle and because this library will render a SCSS file as a minified CSS file upon request.

Actual Results

<link href="scss/a.css" rel="stylesheet" />
<link href="scss/b.css" rel="stylesheet" />

We can see that the extension has been changed from the link tag helper from .scss to .css resulting in a 404 error on the server and no styles being rendered. Also note the lack of the ?v=Hash on these elements. The same issue affects the index page which directly references the /scss/a.scss file here when the EnableTagHelperBundling=false is set.

Potential Solution

I cloned this repository as well as the WebOptimizer.Core repository. Next, I removed the NuGet reference from this project and referenced the local copy of the Core project directly. When I comment out this line of code the project returns the expected values in both the "un-budling" (render each file individually from a bundle reference) scenario on the Bundle.cshtml page and the direct reference on the Index.cshtml page.

I am not familiar enough with this project to know what potential impacts removing that line of code would have, but it does seem to conflict with this library and un-bundling .scss files

eademi commented 9 months ago

We have the same exact issue! Were you able to find a more permanent solution?

tommytayman commented 9 months ago

@eademi - Sorry, no. We're not using .scss quite yes but have plans to in the near future. Knowing that we would be doing some .scss work is what initially prompted me to update our bundling solution. The only way that I have found is just to leave EnableTagHelperBundling to true in local development which makes tracking down JS errors a bit more problematic.

I'm hoping the library authors will be able to patch this up prior to us getting to .scss processing. I would submit a PR with my proposed fix, but not sure if there are other implications of removing that line.

eademi commented 9 months ago

@tommytayman We ended up using another package (AspNetCore.SassCompiler) for compiling .scss into .css and we only use WebOptimizer.Core for bundling and minifying. Thanks again!

tommytayman commented 9 months ago

@eademi - Nice! May look into this as well

AJKKarthik024 commented 9 months ago

@eademi @tommytayman what is the issue with EnableTagHelperBundling =true, what problems we have in JS debugging, I am intending to use this extension, are there any problems to use in prod, and what advantages does AspNetCore.SassCompiler have over weboptimizer.saas, i find weboptimizer.saas easier to use

tommytayman commented 9 months ago

@AJKKarthik024

what is the issue with EnableTagHelperBundling =true, what problems we have in JS debugging

this does not impact anything JS related nor EnableTagHelperBundling=true. The issue is around .scss files and when 'EnableTagHelperBundling=false'. When you have this set to false, each styling file is listed individually but WebOptimizer is changing the .scss extension to .css which causes a 404 error. If the extension was not changed, then .scss files would render correctly both when bundling and when not bundling.

are there any problems to use in prod,

None that I've seen. We've been using this for a month or so now with no issues.

and what advantages does AspNetCore.SassCompiler have over weboptimizer.saas,

I can't speak to this as I have no experience with the other compiler.

AJKKarthik024 commented 8 months ago

@tommytayman ,i have one question, is there any way that when i place multiple scss files in layout like below

in multiple partial views those gets bundled dynamically based on all the sass files into single css and return to browser, instead of multiple network calls

pauldbentley commented 8 months ago

I am facing this issue today as well and noticed the line of code you highlighted. My use-case is exactly the same as yours. In development I want each scss file listed out from the taghelper but the file extension gets changed. I have tried playing with a custom IFileProvider but can't seem to get anything to work.

MWin10 commented 6 months ago

I ended up in implementing an extension method that registers the missing routes by taking each source file and replace the extension .scss with .css

    internal static class WebOptimizerExtender
    {
        internal static void AddCustomScssBundle(this WebOptimizer.IAssetPipeline pipeline, string route, params string[] sourceFiles)
        {            
            foreach (string sourceFile in sourceFiles)
            {
               // add single source file as "bundle"
                string cssRoute = sourceFile.Replace(".scss", ".css", StringComparison.OrdinalIgnoreCase);
                pipeline.AddScssBundle(cssRoute, sourceFile);
            }

            // add the original (complete) bundle 
            pipeline.AddScssBundle(route, sourceFiles);
        }
    }

This could be combined with passing IWebHostEnvironment to add the "single bundles" only in Development environment for example

ligershark / WebOptimizer.Sass