sass / node-sass

:rainbow: Node.js bindings to libsass

Home Page:https://npmjs.org/package/node-sass

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Svelte application - scss not being processed resulting in empty bundle.css at runtime

ori-wagmi opened this issue · 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.