sapper/svelte with fomantic-ui and fontawesome-free

Question

I'm starting a project with Sapper (https://sapper.svelte.dev/) / Svelte (https://svelte.dev/) and my client wants to use Fomantic-UI as a CSS framework (https://fomantic-ui.com/introduction/getting-started.html).

I don't have found on the net, examples of how to do this. Would someone help me do this? Including the correctly configuration for fontawesome-free icons with fomantic-ui?

About the Fomantic-UI, i did:

npx degit "sveltejs/sapper-template#rollup" frontend
cd frontend
npm install --save-dev node-sass svelte-preprocess autoprefixer
npm i fomantic-ui-sass

After that, I changed the rollup.config.js includind this lines:

...
import sveltePreprocess from 'svelte-preprocess';
...
const preprocess = sveltePreprocess({
  scss: {
    includePaths: ['src']
  },
  postcss: {
    plugins: [require('autoprefixer')]
  }
});
...
export default {
  client: {
    ...
    svelte({
        ...,
          preprocess,
        ...
    })
    ...
  server: {
    ...
    svelte({
        ...,
          emitCss: true,
          preprocess,
        ...
    })
    ...

I wrote a file svelte.config.js:

const sveltePreprocess = require('svelte-preprocess');
module.exports = {
  preprocess: sveltePreprocess({
    scss: {
      includePaths: ['src']
    },
    postcss: {
      plugins: [require('autoprefixer')]
    }
  })
};

I created a directory src/stylewith one file global.css:

$theme-folder: 'default' !default;
$image-path: '#{$theme-folder}/assets/images' !default;
$font-path: '#{$theme-folder}/assets/fonts' !default;

@import '../../node_modules/fomantic-ui-sass/src/utils/all';
@import '../../node_modules/fomantic-ui-sass/src/variables'; // default theme variables
@import '../../node_modules/fomantic-ui-sass/src/semantic.scss'; // Semantic-UI SCSS

In src/routes/_layout.svelte, I called the global.scss:

<svelte:head>
  <style src="../style/global.scss"></style>
</svelte:head>

And I copied the folder ./node_modules/fomantic-ui-sass/src/themes/default/assets to ./static/default/assets

And the icons is showing now correctly.

Is this the best solution?

sapper/svelte with fomantic-ui and fontawesome-free

0 Answers0