# svelma-pro
如何使用

# Start

## 如何使用

1

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>

2

使用 [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>