基金会电子邮件-导入所有样式

问题描述

我正在使用基金会电子邮件，并且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]完成了工作。