HiJoe•12mo ago

Using SCSS with Fresh

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?

7 Replies

HiJoeOP•12mo ago

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

Deno AI Helper•12mo ago

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.

Helpful Links: Fresh 1.1 - automatic JSX, plugins, DevTools, and more - Deno Introducing Fresh WordPress Themes Fresh 1.1 - automatic JSX, plugins, DevTools, and more Announcing Deno SaaSKit: an open-source SaaS template built with Fresh

HiJoeOP•12mo ago

Thanks I think a found a workaround with the Fresh plugins.

marvinh.•12mo ago

You can compile SASS/SCSS ahead of time, but since Fresh doesn't transpile server code, importing those in javascript won't work

cdoremus•12mo ago

Maybe this will work for you: https://github.com/LePichu/esbuild-plugin-sass-deno

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

marvinh.•12mo ago

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

HiJoeOP•12mo ago

Yea I created a plugin for the fresh config. Only can't reload on file change

Using SCSS with Fresh

Did you find this page helpful?