Svelte 3 前排占坑（一）

置顶

一位不愿透露姓名的大英俊

于 2020-04-23 17:32:40 发布

阅读量2.5k

点赞数

分类专栏：工作日记文章标签：前端 svelte Svelte3

本文链接：https://blog.youkuaiyun.com/wjy199506/article/details/105517324

版权

本文介绍了使用Svelte 3构建前端博客的初步步骤，包括利用Svelte模板初始化项目，解决Rollup.js对CSS支持的问题，以及引入svelte-spa-router进行路由管理。在设置好这些基础后，文章预告了下一章将探讨Svelte的store功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用svelte当前端写一个blog，后端用sb吧，主要看看svelte的体验感。

一、初始化svelte项目

这里用一个svelte模板https://github.com/sveltejs/template快速初始化

npx degit sveltejs/template my-svelte-blog
cd my-svelte-blog
npm install
npm run dev

一个简单的svelte的hello world就好了，下面都是选择安装

二、安装rollup-plugin-postcss

svelte的默认打包工具(rollup.js)配置里面没有处理css的模块，import .css会报错，so

npm install --save-dev rollup-plugin-postcss

在rollup配置文件中添加css支持

// rollup配置  rollup.config.js
import postcss from 'rollup-plugin-postcss';

// ...


export default {
  // ... 
  plugins: [
      postcss({
	    extensions: [ '.css', '.scss' ],
      }),
  ]
}

那么你的main.js就可以引入css文件了

import './assets/css/responsive-5.4.cs

最低0.47元/天解锁文章