Foundation 电子邮件 - 导入所有样式答案

【问题标题】：Foundation emails - import all stylesFoundation 电子邮件 - 导入所有样式
【发布时间】：2021-02-16 05:48:15
【问题描述】：

我正在使用基础电子邮件，我在 app.scss 中包含以下样式

@import 'flags';

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。

是否有任何选项可以从导入中包含所有样式，无论它们的用途如何。

【问题讨论】：

标签： sass gulp thymeleaf zurb-foundation

【解决方案1】：

找到了解决办法。我在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] 完成了这项工作。

【讨论】：