svelte快速搭建+配置sass+引入Bulma作为样式库

Why svelte?

相比于vue和react，svelte给人的感受跟它的命名一样，苗条。体验了官方的入门教程后，感觉写起来很舒畅，适合快递搭建小项目，中大型项目目前还待考验。而书写风格很对个人口味，我想用两个字去评价它：优雅。

优雅是唯一不会褪色的美。——奥黛丽.赫本

快速开始svelte

在sveltejs官网页面，就有快速搭建的方法，这里使用项目脚手架工具degit来快速开始

# 获取初始模板
npx degit sveltejs/template my-svelte-project
# 进入目录
cd my-svelte-project
# 安装依赖
npm install
# 跑测试
npm run dev

在svelte里写sass

由于初始模板是不支持sass的，只能写css，而用过sass/lsee这种与编译器的开发者，已经回不去css时代了。
我们习惯了嵌套写法，习惯了预设变量，习惯了计算属性，甚至还能在sass里写一些函数。懂的都懂。

先安装一些必要的依赖：

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

再修改初始目录里的rollup.config.js配置文件

// rollup配置  rollup.config.js
import sveltePreprocess from 'svelte-preprocess';
// ...

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

// ...

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

在svelte里，给style标签加上标记

<style lang="scss">
//...
</style>

这时候就能在里面舒服地写sass了。

引入Bulma

为什么选Bulma呢？主要是因为它属于比较纯粹的CSS框架，不依赖于vue，jq之类的框架，相对于boostrap又比较轻便，而且它又是基于sass开发的，无缝融入当前技术栈，最后一个原因是：好看。

安装Bulma：

npm install --save bulma

在main.js里引入样式库

//...
import 'bulma/css/bulma.css';

就这么简单，可以在项目里使用Bluma的样式啦。
需要注意的是，Bluma样式库的Icon使用了Font Awesome，需要另外引入，如果你使用了其他icon库譬如阿里的iconfont，那就可以不装这个。
引入 Font Awesome 图标的方法有两种：一种是通过npm安装（测试过有点问题），另一种是在首页引入cdn资源链接。
这里采用第二种方式，在项目里找到 public/index.html，header里引入：

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

现在就可以在项目里使用Font Awesome的图标啦。