Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Combining SCSS compilation/bundling with CSS bundling #278

Open
thepra opened this issue Aug 3, 2023 · 0 comments
Open

Combining SCSS compilation/bundling with CSS bundling #278

thepra opened this issue Aug 3, 2023 · 0 comments

Comments

@thepra
Copy link

thepra commented Aug 3, 2023

.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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant