如何解决带有 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,...
})
...
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 举报,一经查实,本站将立刻删除。