基于Svelte的Web框架Sapper为我们提供了很多现成的功能。路由，SSR渲染等等。但是，现在前端项目中不能使用使用Sass或Stylus等预处理器，是一个很不爽的事情，而svelte目前官方暂时真的没将这一块纳入初始模板，那么我们就只能自己动手了。
正文
直接使用我集成好的模板
1
2
3
4
5
6
7
8
| # for Rollup
npx degit "KeiferJu/sapper-template-saas#rollup" my-app
# for webpack
npx degit "KeiferJu/sapper-template-saas#webpack" my-app
cd my-app
npm install
npm run dev & open http://localhost:3000
|
手动操作
以下文章以集成saas（scss）为例，其他的可以自己研究svelte-preprocess这个开源项目。
一. 集成saas预处理器
1. 安装依赖模块
1
| npm i -D svelte-preprocess autoprefixer node-sass
|
2. 修改配置文件
Sapper的配置里面具有两套构建方式，一种用于客户端，另一种用于服务器。所以要svelte-preprocess与Sapper一起使用，您需要在两种方式中都对其进行定义。
sapper（rollup）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| // rollup.config.js
// ...
import sveltePreprocess from 'svelte-preprocess';
const preprocess = sveltePreprocess({
scss: {
includePaths: ['src'],
},
postcss: {
plugins: [require('autoprefixer')],
},
});
export default {
client: {
plugins: [
svelte({
// ...
preprocess, // <-- ADD THIS LINE
}),
},
server: {
plugins: [
svelte({
// ...
preprocess, // <-- HERE TOO
}),
],
},
};
|
sapper（webpack）
webpack里面没有初始css的loader,我们顺便加进去，防止我们可能需要使用一些css样式。
下载css处理loader
1
| npm install -D style-loader css-loader sass-loade
|
sapper配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| //webpack.config.js
// ...
const sveltePreprocess = require('svelte-preprocess');
const preprocess = sveltePreprocess({
scss: {
includePaths: ['src'],
},
postcss: {
plugins: [require('autoprefixer')],
},
});
module.exports = {
client: {
// ...
module: {
rules: [
{
test: /\.(svelte|html)$/,
use: {
loader: 'svelte-loader',
options: {
preprocess,
// ...
}
}
},
// ----------------css处理（可以不使用）------------
{
test: /\.css|.scss$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' },{loader: 'sass-loader'}],
},
// -------------------------------------------------
]
},
// ...
},
server: {
// ...
module: {
rules: [
{
test: /\.(svelte|html)$/,
use: {
loader: 'svelte-loader',
options: {
preprocess,
// ...
}
}
},
// ----------------css处理（可以不使用）------------
{
test: /\.css|.scss$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' },{loader: 'sass-loader'}],
},
// -----------------------------------------------
]
},
// ...
},
// ...
};
|
3. 使用方法
现在，你只要将lang=“scss”添加到样式标签上，就可以解析saas语法了
1
2
3
4
5
6
| <style lang="scss">
$color: red;
div {
color: $color;
}
</style>
|
二. vs code修正
我们完全可以正常使用scss了，但是有一个麻烦，vscode对这样的表示方式认为是错的。
首先，从VS Code中安装“ Svelte”扩展。
接下来，在项目的顶层创建一个svelte.config.js
1
2
3
4
5
6
7
8
9
10
11
| const sveltePreprocess = require('svelte-preprocess');
module.exports = {
preprocess: sveltePreprocess({
scss: {
includePaths: ['src'],
},
postcss: {
plugins: [require('autoprefixer')],
},
}),
};
|
后记
如果使用我集成好的模板,里面还加入了一些我常用的一些东西(时间总线和代理,引入了bulma样式框架).
使用saas：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <style src="./style.scss"></style>
<!-- Or -->
<style lang="scss">
$color: red;
.test{
color: $color;
}
</style>
<!-- Or -->
<style lang="scss">
@import "./style.scss";
</style>
|
使用事件总线
还在里面加入了一个简单的事件总线。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| /**
* 事件总线
*
* 使用方法:
* 1. 引入组件类
* import EventBus from '../service/EventBus'
* 2. 事件输出与订阅
* 输出：EventBus.emit('ww.myevent','nihao1')
*
* 订阅：EventBus.addEventListener('ww.myevent', (data) => {
* name = data;
* })
*
*/
|
使用代理(proxy.config.js)
path: 匹配路径，支持多个,例如[1,2,3]
target: 代理路径
1
2
3
4
5
6
7
| const proxyArray = [
{
path: ['/test'],
target: 'http://localhost:3000'
},
...
]
|
