JS 製フレームワーク Svelte + Sass + Autoprefixer

xxxxx.svelte ファイルの中で sass を使えるようにする。
autoprefixer とはブラウザ毎にハックしなければいけない css の文法を、
ビルドする時にいい感じにしてくれるツール。
書く量とブラウザ毎の細かい仕様を気にせず書けるので非常に便利。

下記のサンプルコードをビルドできるようにする。
lang="scss" は sass を使うために使用したパッケージ先の使用例を参考。

<script>

	let hello = 'world'

</script>

<style lang="scss">

	$color-a: #f44;
	$color-a-hover: #f66;

	ul {
		padding: 0;
		margin: 5px;
		li {
			list-style-type: none;
			margin-bottom: 10px;
			a {
				color: $color-a;
				&:hover, &:active {
					color: $color-a-hover;
				}
			}
		}
	}

</style>

<h1>Hello, { hello }</h1>

<ul>
	<li><a href="#">test1</a><li>
	<li><a href="#">test2</a><li>
	<li><a href="#">test3</a><li>
</ul>

パッケージのインストール

• kaisermann/svelte-preprocess

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

rollup.config.js の編集

$ cd /path/to/your/project
$ vi rollup.config.js

// svelte-preprocess 読み込み
import preprocess from 'svelte-preprocess'

export default {
	plugins: [
		...,
		svelte({
			..,
			css: css => {
				css.write('public/css/bundle.css');
			},
			// 下記追加
			preprocess: preprocess({
				scss: true,
				postcss: {
					plugins: [
						require('autoprefixer')({ browsers: 'last 2 versions' })
					],
				},
			}),
		}),
		...,
	],
}

最後にビルド

$ npm run build