svelma-pro

NPM

此组件库适用于基于rollup或者webpack搭建的svelte及sapper项目

下载安装

下载bluma与组件库.

npm install --save bulma svelma-pro

undefined

集成scss模板语法支持(因为组件库采用了类似vue的scss模板写法,所以需要也集成进去).

npm install --save-dev svelte-preprocess autoprefixer node-sass sass

undefined

添加 scss编译 到你的 rollup.config.js 配置文件中(或者webpack.config.js).

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

// ...

export default {
  // ... 
  plugins: [
    svelte({
      // ...
      preprocess: preprocess,
    })
  ]
}

如果使用webpack,在 webpack.config.js 配置文件中.

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

// ...

module.export = {
  // ... 
  module: {
    rules: [
      {
        test: /.(svelte|html)$/,
        use: {
          loader: 'svelte-loader',
          options: {
            preprocess, 
            // ...
          }
        }
      },
    ]
  },
  ]
}

使用

引入bluma样式到您的项目

<!-- main.js或者client.js全局引入 -->
<script>
  import 'bulma/css/bulma.css'
</script>

svelma-pro组件可以一次导入一个，就像这样

<script>
  import { Button } from 'svelma-pro'
</script>

<Button>I am a Button</Button>

或导入完整的Svelma软件包。

<script>
  import { Svelma } from 'svelma-pro'
</script>

<Svelma.Button>I am a Button</Svelma.Button>

使用 [Font Awesome] 图标

添加 CDN 在你的 HTML 页面:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"></link>

...或者使用npm包:

npm install --save @fortawesome/fontawesome-free

<!-- main.js or client.js(sapper) -->
<script>
  import '@fortawesome/fontawesome-free/css/all.css'
</script>

Start

如何使用