如何在Polymer组件中使用Sass

Question

我目前正在使用Polymer作为我的前端开发框架.我喜欢SASS.现在我明白我可以像往常一样创建一个Sass文件并导入它.

但是,我真的养成了在我的Web组件中使用样式标记的习惯.

基本上我正在寻找的工作流程是能够在我的Web组件中简单地定义一个脚本标签,可以添加type ='sass; 它.然后让grunt通过并在将这些文件输出到我的.tmp目录之前编译我的所有SASS.

像Grunt或Gulp这样的东西是可以实现的吗？如果是这样,那么帮助我实现这一目标的最佳模块是什么？

Answer 1

我的实现基于Polymer html文件中的标签替换.我正在使用gulp但可以改为简单使用fs.

文件结构应如下例所示:

app-view
 |- app-view.html
 |- app-view.scss

APP-view.html:

<dom-module id="app-view">
    <template>
        <style>
            <!-- inject{scss} -->
        </style>
    </template>
</dom-module>

APP-view.scss:

:host{
    margin-top: 50px;
    justify-content: center;
    display: flex;
}
#container{
    font-size: 12px;
    h1{
        font-size: 20px;
    }
}

gulpfile.js:

var gulp = require('gulp');
var nodeSass = require('node-sass');
var path = require('path');
var fs = require('fs');
var map = require('map-stream');
var srcPath = 'src/';
var buildPath = 'build/';
var buildSrcPath = path.join(buildPath, 'target');

gulp.task('processComponents', function () {
    return gulp.src([srcPath + '/components/**/*.html'])
        .pipe(map(function (file, cb) {
            var injectString = '<!-- inject{scss} -->';
            // convert file buffer into a string
            var contents = file.contents.toString();
            if (contents.indexOf(injectString) >= 0) {
                //Getting scss
                var scssFile = file.path.replace(/\.html$/i, '.scss');
                fs.readFile(scssFile, function (err, data) {
                    if (!err && data) {
                        nodeSass.render({
                            data: data.toString(),
                            includePaths: [path.join(srcPath, 'style/')],
                            outputStyle: 'compressed'
                        }, function (err, compiledScss) {
                            if (!err && compiledScss) {
                                file.contents = new Buffer(contents.replace(injectString, compiledScss.css.toString()), 'binary');
                            }
                            return cb(null, file);
                        });
                    }
                    return cb(null, file);
                });
            } else {
                // continue
                return cb(null, file);
            }
        }))
        .pipe(gulp.dest(path.join(buildSrcPath, 'components')));
});

结果:

<dom-module id="app-view">
    <template>
        <style>
            :host{margin-top:50px;justify-content:center;display:flex}#container{font-size:12px}#container h1{font-size:20px}
        </style>
    </template>
</dom-module>