如何在 Polymer 组件中使用 Sass

2022-01-12 00:00:00 css gruntjs sass gulp polymer

我目前使用 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>

相关文章