Attempting to use bun to build my scss, but failing #5255
Replies: 4 comments 3 replies
-
Any more success after this? I am also at a loss on how to emit a custom resource separately in the outdir (according to the naming guidelines). And inline in the bundle I would want a reference (to the path/hash). Tried various things with handing off the the |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
Hi, not sure if this helps but i am attempting similiar thing. But doing it as script not plugin. Also I am doing glob implementation and postcss compile. Then I just run its probably rough around edges, but it get job done right now. /// <reference types="bun-types" />
import {compileString} from "sass"
import fg from "fast-glob"
import emMediaQuery from "postcss-em-media-query"
import pxtorem from "postcss-pxtorem"
import purgecss from "@fullhuman/postcss-purgecss"
import postcss from "postcss"
import flexbugsFixes from "postcss-flexbugs-fixes"
import viewportHeightCorrection from "postcss-viewport-height-correction"
import postcss100vhfix from "postcss-100vh-fix"
import {unlinkSync} from "node:fs"
import settings from "./gulp/settings"
const sourcePath = `${import.meta.dir}/src/scss/style.scss`
const tempPath = `${import.meta.dir}/src/scss/style-compiled.css`
const distPath = `${import.meta.dir}/src/css/style.css`
const sassSetting = {
loadPaths: [`node_modules/`, `src/scss/`, `src/`, `./`],
sourceMap: true,
}
const sassFile = Bun.file(sourcePath)
const sassFileContent = await sassFile.text()
let sassContentGlobbed = sassFileContent
const IMPORT_REG = /^([ \t]*(?:\/\*.*)?)@import\s+["']([^"']+\*[^"']*(?:\.scss|\.sass)?)["'];?([ \t]*(?:\/[/*].*)?)$/gm
const matches = sassFileContent.match(IMPORT_REG)
for (const match of matches ?? []) {
const glob = `${match.split('"')[1]}.scss`
const files = (await fg(glob ?? "")).map((file) => {
return `@import "${file}";`
})
sassContentGlobbed = sassContentGlobbed.replace(match, files.join("\n"))
}
const sassCompiled = compileString(sassContentGlobbed, sassSetting)
await Bun.write(tempPath, sassCompiled.css)
await Bun.write(`${tempPath}.map`, JSON.stringify(sassCompiled.sourceMap))
const postCssPlugins = [
flexbugsFixes,
viewportHeightCorrection,
postcss100vhfix,
emMediaQuery(settings.emMediaQuery),
purgecss(settings.purgeCss),
pxtorem(settings.pxtorem),
] as postcss.AcceptedPlugin[]
const processPostCss = await postcss(postCssPlugins).process(sassCompiled.css, {
from: tempPath,
to: distPath,
map: {
inline: true,
prev: JSON.stringify(sassCompiled.sourceMap),
},
})
await Bun.write(distPath, processPostCss.css)
if (processPostCss.map) {
await Bun.write(`${distPath}.map`, processPostCss.map.toString())
}
// remove temporary files
unlinkSync(tempPath)
unlinkSync(`${tempPath}.map`) |
Beta Was this translation helpful? Give feedback.
-
Would Like to add that if you cant find modules, you probably need something like this:
|
Beta Was this translation helpful? Give feedback.
-
Hi. So I usually run backends that don't rely on javascript. So my use case for javascript in my frontend apps is limited to building small javascript libraries for my app, and also generating my css from sass. Unfortunately I'm having trouble with the latter.
Using this code:
Unfortunately this does not build the css files for me as expected. Bun crashes with the following error:
The error isn't clear as to exactly the problem and is hard to debug based on this. Especially because the source file does exist, and if I do
console.log(result.css)
inside that plugin, then I can see that the css was generated perfectly fine;But the output file is never written and I get that error.
Beta Was this translation helpful? Give feedback.
All reactions