D
Deno

help

Using SCSS with Fresh

HHiJoe1/11/2024
Hi, I'm starting to get into Fresh for building simple static websites. Right now I want to use my preferred tool, SASS(scss). Can I intergrate this directly with Fresh? Or do I need to do this separately? I did try now this in the fersh.config:
import { defineConfig } from "$fresh/server.ts";
import { sassPlugin } from "npm:esbuild-sass-plugin@2.16.1";

export default defineConfig({
plugins: [sassPlugin()],
});
import { defineConfig } from "$fresh/server.ts";
import { sassPlugin } from "npm:esbuild-sass-plugin@2.16.1";

export default defineConfig({
plugins: [sassPlugin()],
});
Only without success
DAHDeno AI Helper1/11/2024
Hello! I wasn't able to find the answer to your question in the official Deno documentation. However, based on your message, there are no obvious syntax errors or mistakes. Fresh is designed to be a modern frontend framework, and while it has built-in support for some tools, SCSS integration isn't explicitly documented. Since I cannot provide a definitive answer based on the official documentation, I would recommend exploring the Fresh documentation and community resources to see if there's a recommended approach for integrating SCSS with Fresh. It's possible that you might need to process your SCSS files separately and then include the resulting CSS in your Fresh project. Please note that this advice is not based on the Deno documentation, and I advise you to double-check the accuracy of this advice and consult with the Fresh community or documentation for the most accurate guidance.
HHiJoe1/11/2024
Thanks I think a found a workaround with the Fresh plugins.
Mmarvinh.1/11/2024
You can compile SASS/SCSS ahead of time, but since Fresh doesn't transpile server code, importing those in javascript won't work
Ccdoremus1/12/2024
GitHub
GitHub - LePichu/esbuild-plugin-sass-deno: Made for the poor souls ...
Made for the poor souls trying to use SASS/SCSS on Deno using ESBuild as bundler who did not know esbuild-sass-plugin was not compatible with Deno due to Dart-SASS being a pain. - GitHub - LePich...
Mmarvinh.1/12/2024
Fresh only uses esbuild to compile island code for browsers. All the other parts of Fresh are not passed through esbuild. Since we render islands also on the server, Deno will throw when it encounters a sass import. That's why adding the sass plugin to esbuild is not enough
HHiJoe1/12/2024
Yea I created a plugin for the fresh config. Only can't reload on file change

Looking for more? Join the community!

Recommended Posts
Has anyone used React Material UI with Deno Fresh? Is this possible and also what are the componenetHas anyone used React Material UI with Deno Fresh? Is this possible and also what are the componenetJSX element implicitly has type 'any' because no interface 'JSX.IntrinsicElements'I have a core program, and from that I have auxiliary components: test, web app, cli app. Initially Using Deno.Command to run tailwindcss with watch flag not workingIf I do `new Deno.Command(Deno.execPath(), {args:["run", "-A", "npm:tailwindcss", "-i", "./styles.csESBuild SASS PluginHey, I have developed this Plugin: https://github.com/DenoPlayground/esbuild-plugin-sass But I havCan't spawn a shell properly using Deno!```ts const bash = (() => { const bashProc = spawn("bash"); bashProc.stdout.on("data", (data: sHow to optimize imports on deno deploy?I have a medium project (44 files) deployed on deno deploy, where works. But, I'm getting inconsistLSP complains about missing package mongodbVS Code keeps complaining about "uncached or missing npm package: mongodb". `Cache "npm:mongodb" andnode.js to Deno remix template migrationI would like to migrate one of the templates in remix from node.js to Deno. I am not sure how to do How to pass value from one form to another?I want to design a form which has two input text field. What users type in field 1 will be passed toHow to build a Response object with the 'url' property setWriting unit tests. Some functions parse Response objects. How do I create some where the `url` propWhy Deno is not a library?For example, I'd like to embed JavaScript (Deno) on FreeBasic or Rust to able Users to write JavaScr`deno cache` consistently failing with the same errorerror: error sending request for url (https://deno.land/std@0.152.0/http/negotiation.ts): dispatch tDoes fetch() support upgrading the connection to a websocket?What happens when `fetch()` gets the response ``` HTTP/1.1 101 Switching Protocols connection: upgrError: Not implemented: crypto.Sign``` Error: Not implemented: crypto.Sign at notImplemented (https://deno.land/std@0.177.1/node/_uHow can I access req object inside a render() function from fresh plugin?Is it possible?Deno Deploy KV: Gateway TimeoutI been using KV on this project since closed beta and it worked great, but since yesterday **Write O