問題描述

我目前使用 Polymer 作為我的前端開發(fā)框架.我喜歡薩斯.現(xiàn)在我知道我可以像往常一樣創(chuàng)建一個(gè) Sass 文件并導(dǎo)入它.

I'm currently using Polymer as my front end development framework. I love SASS. Now I understand I can create a Sass file and import it like I normally would.

不過，我已經(jīng)養(yǎng)成了在我的 Web 組件中使用樣式標(biāo)簽的習(xí)慣.

However, I've really gotten into the habit of using style tags within my web components.

基本上，我正在尋找的工作流程是能夠在我的 Web 組件中簡(jiǎn)單地定義一個(gè)腳本標(biāo)簽，也許可以添加 type='sass;給它.然后在將文件輸出到我的 .tmp 目錄之前，讓 grunt 編譯這些標(biāo)簽中的所有 SASS.

Basically the workflow I am looking for is to be able to simply define a script tag within my Web Component maybe add type='sass; to it. Then have grunt go through and compile all of my SASS within those tags before outputting the files to my .tmp directory.

像 Grunt 或 Gulp 這樣的東西可以實(shí)現(xiàn)嗎?如果是這樣，什么是幫助我實(shí)現(xiàn)這一目標(biāo)的最佳模塊?

Is something like this achievable with something like Grunt or Gulp? If so what are the best modules to help me achieve this?

推薦答案

我的實(shí)現(xiàn)是基于 Polymer html 文件中的標(biāo)簽替換.我正在使用 gulp 但可以更改為簡(jiǎn)單地使用 fs.

My implementation is based on a replacement of a tag inside the Polymer html file. I'm using gulp but could be changed to use simply fs.

文件結(jié)構(gòu)應(yīng)該是這個(gè)例子:

The files structure should be as this example:

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')));
});

結(jié)果:

<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>

這篇關(guān)于如何在 Polymer 組件中使用 Sass的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！