css - 如何在 Polymer 组件中使用 Sass

Question

我目前使用 Polymer 作为我的前端开发框架。我爱萨斯。现在我知道我可以创建一个 Sass 文件并像往常一样导入它。

但是，我真的养成了在我的网络组件中使用样式标签的习惯。

基本上，我正在寻找的工作流程是能够在我的 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>