Svelte application - scss not being processed resulting in empty bundle.css at runtime
ori-wagmi opened this issue · 1 comments
Issue
I'm migrating my Svelte project to node v18.12.1. Everything is building, but when I navigate to my page it doesn't have any of the local .css in my pages and the page content isn't styled.
When I inspect the build/bundle.css
at runtime, the page is empty. This is unexpected. My guess is that .scss isn't being processed.
Svelte app layout
I'm using rollup to bundle my application. the relevant rollup.config.mjs
content is:
import css from 'rollup-plugin-css-only';
import preprocess from "svelte-preprocess";
import scss from "rollup-plugin-scss";
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
svelte({
preprocess: preprocess()
}),
scss(),
// we'll extract any component CSS out into
// a separate file - better for performance
css({ output: 'bundle.css' }),
In my project, i have a style.scss
file and <style lang="scss">
sections in my .svelte files. None of these are being processed.
Environment info
ori@Arborea:~/code/axplorer-frontend$ npm -v
8.19.2
ori@Arborea:~/code/axplorer-frontend$ node -v
v18.12.1
ori@Arborea:~/code/axplorer-frontend$ node -p process.versions
{
node: '18.12.1',
v8: '10.2.154.15-node.12',
uv: '1.43.0',
zlib: '1.2.11',
brotli: '1.0.9',
ares: '1.18.1',
modules: '108',
nghttp2: '1.47.0',
napi: '8',
llhttp: '6.0.10',
openssl: '3.0.7+quic',
cldr: '41.0',
icu: '71.1',
tz: '2022b',
unicode: '14.0',
ngtcp2: '0.8.1',
nghttp3: '0.7.0'
}
ori@Arborea:~/code/axplorer-frontend$ node -p process.platform
linux
ori@Arborea:~/code/axplorer-frontend$ node -p process.arch
x64
ori@Arborea:~/code/axplorer-frontend$ node -p "require('node-sass').info
> "
node-sass 8.0.0 (Wrapper) [JavaScript]
libsass 3.5.5 (Sass Compiler) [C/C++]
ori@Arborea:~/code/axplorer-frontend$ npm ls node-sass
svelte-app@1.0.0 /home/ori/code/axplorer-frontend
└── node-sass@8.0.0
Ah, I noticed that if I run npm run build
, which does rollup -c
, I see .css files being generated under /public/build/assets/output-*.css
Seems like rollup is not properly bundling the css files. This is likely a rollup issue and not node-sass.