如何在Polymer组件中使用Sass [英] How to use Sass inside a Polymer component

查看:142
本文介绍了如何在Polymer组件中使用Sass的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我目前使用Polymer作为我的前端开发框架。我喜欢SASS。
现在我明白我可以创建一个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;到它。然后grunt通过和编译所有的SASS在这些标签,然后输出文件到我的.tmp目录。

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.

文件结构应为此示例:

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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆