如何解决基金会电子邮件-导入所有样式
我正在使用基金会电子邮件,并且app.scss中包含以下样式
@import 'flags';
标志文件包含所有这样的标志:
.flag-icon-bq {
background-image: url(../images/4x3/bq.svg);
}
.flag-icon-br {
background-image: url(../images/4x3/br.svg);
}
... etc.
在生成电子邮件的Thymeleaf中,我使用以下表达式来分配适当的类:
<i th:class="'flag-icon-'+${userCountryCode}"></i>
问题是,当我通过npm run build
生成CSS时,只有使用过的CSS类才转到CSS。显然,这被检测为未使用,因此不会进入最终的CSS。
是否可以选择从导入中包括所有样式,而不论它们的用法。
解决方法
找到了解决方案。我在gulpfile.js
中进行了以下更改:
function sass() {
return gulp.src('src/assets/scss/app.scss')
.pipe($.if(!PRODUCTION,$.sourcemaps.init()))
.pipe($.sass({
includePaths: ['node_modules/foundation-emails/scss']
}).on('error',$.sass.logError))
.pipe($.if(PRODUCTION,$.uncss(
{
html: ['dist/**/*.html'],ignore: [/\.flag-icon-\w+/g]
})))
.pipe($.if(!PRODUCTION,$.sourcemaps.write()))
.pipe(gulp.dest('dist/css'));
}
添加ignore: [/\.flag-icon-\w+/g]
完成了工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。