带有 fomantic-ui 和 fontawesome-free 的工兵/苗条

问题描述

我正在使用 Sapper (https://sapper.svelte.dev/) / svelte (https://svelte.dev/) 启动一个项目，我的客户想要使用 Fomantic-UI 作为 CSS 框架 (https://fomantic-ui.com/introduction/getting-started.html)。>

我没有在网上找到有关如何执行此操作的示例。有人会帮我做这个吗？在 fomantic-ui 中包含对 fontawesome-free 图标的正确配置？

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

我写了一个文件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

现在图标显示正确。

这是最好的解决方案吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）