首先,非常感谢和感激David Vega展示了如何完成这个技术!我做了一些调整并且优化了代码。以下是文件的github链接:
https://github.com/superjose/polymer-sass/tree/master
嗯,这花费了我一些时间。接下来就是Polymer 1.1版本。从官网
(https://www.polymer-project.org/1.0/docs/devguide/styling#style-modules)可以看到:
注意:样式模块在Polymer 1.1中被引入,它们替代了对外部样式表的实验性支持。
相反,现在它们支持“共享样式”。
这意味着我们可以导入包含CSS内容的.html文件。问题是我们不能用正常的方法使用.sass。
幸运的是,这里有一个更简单的解决方案。
以下脚本的作用是获取你的.scss文件,解析它们,并将它们注入到共享样式.html中。
以下是代码。下面是使用和设置步骤:
var gulp = require('gulp');
var nodeSass = require('node-sass');
var path = require('path');
var fs = require('fs');
var map = require('map-stream');
var basePath = "app/";
var excludeDir = basePath+"bower_components/";
var ext = "**/*.html";
var includePaths = ['app/elements/**/'];
gulp.task('watchSass', function(){
gulp.watch(['app/**/*.scss', '!app/bower_components/**/*.scss'], ["injectSass"]);
});
var excludeDirs = [`!${basePath}/bower_components/${ext}`,`!${basePath}/images/${ext}`]
gulp.task('injectSass', function () {
return gulp.src([basePath+ext, '!'+excludeDir+ext])
.pipe(map(function (file, cb) {
var startStyle = "<!-- Start Style -->";
var endStyle = "<!-- End Style -->";
var regEx = new RegExp(startStyle+"[\\s\\S]*"+endStyle, "g");
var contents = file.contents.toString();
if (!regEx.test(contents)) {
return cb();
}
var scssFile = file.path.replace(/\.html$/i, '.scss');
fs.readFile(scssFile, function (err, data) {
if (err || !data) {
return cb();
}
nodeSass.render({
data: data.toString(),
includePaths: [path.join('app', 'style/'), ...includePaths],
outputStyle: 'compressed'
}, function (err, compiledScss) {
if (err || !compiledScss)
return cb();
var injectSassContent = startStyle +
"<style>" +
compiledScss.css.toString() +
"</style>" +
endStyle;
file.contents = new Buffer(contents.replace(regEx, injectSassContent), 'binary');
return cb(null,file);
});
});
}))
.pipe(gulp.dest(basePath));
});
1) 设置你的元素:
假设你有一个名为“hero-tournament”的元素:
<dom-module id="hero-tournament">
<template>
<style>
</style>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'hero-tournament',
});
})();
</script>
</dom-module>
您想将您的.scss文件注入其中。
在此之外,创建两个新文件:
hero-tournament-style.html
hero-tournament-style.scss
在第一个文件 hero-tournament-style.html 中写入以下内容:
<!-- hero-tournament-style.html -->
<dom-module id="hero-tournament-style">
<template>
<!-- Start Style -->
<style>
</style>
<!-- End Style -->
</template>
</dom-module>
请注意:
<!
评论?
这些是非常重要的,因为所有的CSS都将放在这些标签内。它们对大小写敏感,但不对位置敏感。一定要在您的模板标签内部和样式标签外部包含它们。
然后,在您的hero-tournament-style.scss文件中,包含您的Sass CSS:
(示例)
.blank{
display: none;
}
2) 运行 Gulp:
gulp watchSass
Bam!你会发现你的“hero-tournament-style.scss”文件已被覆盖为CSS!!!
<!-- -hero-tournament-style.html -->
<dom-module id="-hero-tournament-style">
<template>
<!-- Start Style -->
<style>.blank{display:none}
</style><!-- End Style -->
</template>
</dom-module>
现在,您可以在任何地方引用该文件!!! 还记得您的第一个元素,原始元素(“hero-tournament.html”)吗? 对它执行以下操作:
<!-- import the module -->
<link rel="import" href="../path-to-my-element/.html">
<dom-module id="hero-tournament">
<template>
<style include="hero-tournament-styles"></style>
</template>
<script>
(function() {
'use strict';
Polymer({
is: 'hero-tournament',
});
})();
</script>
</dom-module>
一些最后的说明:
使用SASS导入
使用Sass导入很容易,只需要注意以下几点:
在gulpfile中有一个名为“includePaths”的变量。这是一个数组,nodeSass将查找所有导入文件。如果未指定导入文件的任何位置,将阻止您的文件注入和编译。默认情况下,在脚本中有一个'app/style'目录,它将查找文件。
文件夹结构
文件夹结构很重要,可以根据您的喜好进行调整。
假设您的元素位于与gulpfile相同层次的“app”文件夹内:
-gulpfile.js
/app
/element
/hero-tournament
-hero-tournament.html
-hero-tournament-styles.html
-hero-tournament-styles.scss
/maybe-other-folder
如果您想更改文件夹结构,请更改“basePath”变量。请务必检查前导“/”,以免破坏您的结构!
如何运行gulpfile?
很容易:
调用“watchSass”方法进行监视,或者使用“injectSass”方法使用一次。
gulp watchSass
gulp injectSass
更多信息请查看Github页面!!!