How to add SCSS to a Svelte project using Routify

- Posted in development routify webdev

Note: this post is out of date since the 1.5 release of Routify.

Here’s the code you will need.

For package.json:

    "build:sass": "node-sass --recursive --output dist/build --source-map true --source-map-contents scss",
    "watch:sass": "npm run build:sass && npm run build:sass -- --watch"

For rollup.config.js


function postScript(production) {
  let started = false;
  const sassTask = production ? 'build:sass' : 'watch:sass'

  return {
    writeBundle() {
      if (!started) {
        started = true;

        if (!production)
          require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
            stdio: ['ignore', 'inherit', 'inherit'],
            shell: true
          });

        require('child_process').spawn('npm', ['run', sassTask], {
          stdio: ['ignore', 'inherit', 'inherit'],
          shell: true
        });
      }
    }
  };
}

For __dynamic.html and __bundle.html:

    <link rel='stylesheet' href='/build/global.css'>

Make sure to add an SCSS folder to the root of your project, with in this case a file called global.scss.

Leave a Reply

Your email address will not be published. Required fields are marked *