問題描述

我目前使用 Polymer 作為我的前端開發框架.我喜歡薩斯.現在我知道我可以像往常一樣創建一個 Sass 文件并導入它.

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.

不過，我已經養成了在我的 Web 組件中使用樣式標簽的習慣.

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

基本上，我正在尋找的工作流程是能夠在我的 Web 組件中簡單地定義一個腳本標簽，也許可以添加 type='sass;給它.然后在將文件輸出到我的 .tmp 目錄之前，讓 grunt 編譯這些標簽中的所有 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 這樣的東西可以實現嗎?如果是這樣，什么是幫助我實現這一目標的最佳模塊?

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

推薦答案

我的實現是基于 Polymer html 文件中的標簽替換.我正在使用 gulp 但可以更改為簡單地使用 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.

文件結構應該是這個例子:

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

結果:

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

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