时间戳

首页 > 解决方案 > 带有 fomantic-ui 和 fontawesome-free 的 sapper/svelte

css - 带有 fomantic-ui 和 fontawesome-free 的 sapper/svelte

问题描述

我正在使用 Sapper ( https://sapper.svelte.dev/ ) / Svelte ( https://svelte.dev/ ) 开始一个项目，我的客户希望使用 Fomantic-UI 作为 CSS 框架 ( https:// fomantic-ui.com/introduction/getting-started.html）。

我没有在网上找到如何做到这一点的例子。有人会帮我这样做吗？包括对带有 fomantic-ui 的无字体图标的正确配置？

关于 Fomantic-UI，我做了：

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

在那之后，我改变了rollup.config.js包括这一行：

...
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,
        ...
    })
    ...

我写了一个文件svelte.config.js：

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

我src/style用一个文件创建了一个目录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

在src/routes/_layout.svelte，我打电话给global.scss：

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

我将文件夹复制./node_modules/fomantic-ui-sass/src/themes/default/assets到./static/default/assets

并且图标现在正确显示。

这是最好的解决方案吗？

标签： cssfont-awesomesveltesapperfomantic-ui

解决方案

推荐阅读