Riot.jsにSass(SCSS)を導入する

Riot.jsでは、標準でスタイルシートにLessを使用することができます。 その際の使用方法は簡単で、スタイルタグにtypeを指定するだけです。 <style type="less"> ... </style> 扨、ここで、イマドキな皆さんはLessじゃなくてSass(SCSS)を使いたい!と思うかもしれません(思いますよね?) なので、Sassを使えるようにしてみましょう。 基本方針 基本的には、riot.parser.css.sassにSassのコンパイラ関数を作成するだけです。 riot.parser.css.sassには、引数として、 タグ名 stylesheet が渡されます。この、第二引数をコンパイルして返す関数を作成すれば良いのです。 ランタイムコンパイルでSass(SCSS)を使用する ランタイムコンパイル時はsass.jsを使用します。 <head>タグ内で、https://cdn.rawgit.com/medialize/sass.js/v0.6.3/dist/sass.jsを読み込むなどすれば良いでしょう。 その上で、タグのマウント前に以下の記述を追加します。 riot.parsers.css.sass = function(tagName, stylesheet) { var result = Sass.compile(stylesheet); return result; }; gulp-riotプリコンパイルでSass(SCSS)を使用する glup-riotでプリコンパイルする際にSassを使用するには、node-sassを使用して、gulpfile.jsに以下のように記述します。 var gulp = require('gulp'); var riot = require('gulp-riot'); var sass = require('node-sass'); gulp.task('riot', function() { gulp .src('app.tag') .pipe(riot({ parsers: { css: { sass: function(tagName, stylesheet) { var result = sass.renderSync({ data: stylesheet }); return result.css.toString(); }, }, }, })) ....

2017-07-19 · nasa9084