ligershark / WebOptimizer

A bundler and minifier for ASP.NET Core
Apache License 2.0
764 stars 113 forks source link

Combining SCSS compilation/bundling with CSS bundling #278

Open thepra opened 1 year ago

thepra commented 1 year ago

.NET: v7 Project template: Blazor Hosted WebAssembly

Hi all, I'm trying to move from the Visual Studio extensions such as "Web Compiler 2022+" and "Bundler and Minifier 2022+" to something that is cross-platform and can run in VS Code too. Currently I would use the WebOptimizer from the "Server" project and compile(SCSS) and bundle(CSS) file in the "Client" project and write this files right into the folders rather than serve them at runtime. So the structure looks like this: immagine And I'm adding AddWebOptimizer in the collAnon.Server.Program.cs file like this:

service.AddWebOptimizer(pipeline =>
{
  var currentDirectory = Directory.GetCurrentDirectory().Replace("Server", "Client");
  var provider = new PhysicalFileProvider(currentDirectory);
  var bulmaBundle = pipeline.AddScssBundle(@$"/wwwroot/vendor/bulma-final.css", @$"/SCSS/Bulma/bulma.scss")
      .UseFileProvider(provider)
      .UseContentRoot()
      .CompileScss()
      .MinifyCss();
  var styleBundle = pipeline.AddScssBundle(@$"/wwwroot/css/my-style.css", @$"/SCSS/main.scss")
      .UseFileProvider(provider)
      .UseContentRoot()
      .CompileScss()
      .MinifyCss();
  //var compiles = pipeline.CompileScssFiles();
  var cssBundle = pipeline.AddCssBundle(@"/css/style.min.css",
      @$"/wwwroot/css/variables.css",
      @$"/wwwroot/css/fontawesome.css",
      @$"/wwwroot/css/duotone.css",
      @$"/wwwroot/vendor/font-awesome-animation.min.css",
      @$"/wwwroot/vendor/bulma-final.css",
      @$"/wwwroot/css/bulma-tagsinput.css",
      @$"/wwwroot/css/bulma-badge.css",
      @$"/wwwroot/css/bulma-checkradio.min.css",
      @$"/wwwroot/css/bulma-steps.css",
      @$"/wwwroot/css/bulma-tooltip.min.css",
      @$"/wwwroot/css/skeleton-screen.css",
      @$"/wwwroot/css/my-style.css",
      @$"/wwwroot/vendor/tailwind-final.css",
      @$"/wwwroot/vendor/tailwind-override.css")
      .UseFileProvider(provider)
      .UseContentRoot();
  var a = 0;
});

I would like to know if it's even possible to write such files to the "Client" project paths. And if not, is there a way to combine SCSS bundling with consequent CSS bundling(like I'm trying to do with those setup code) or it's just one or(XOR) the other?