css - 从 gulp iconfontCss 到 Webpack

Question

我想完全从 gulp 切换到 webpack，但我仍在寻找一个好的解决方案。

这个 gulp 任务实现了什么:

• 获取 src/assets/icons/**/* 中的所有 svgs
• 创建字体(ttf、eot、woff...)
• 感谢 src/assets/css/icons_template.scss icons.scss 文件为每个图标创建类

我的 Gulpfile

var gulp = require('gulp');
var iconfont = require('gulp-iconfont');
var iconfontCss = require('gulp-iconfont-css');

gulp.task('icons', function () {
    return gulp.src('src/assets/icons/**/*')
        .pipe(iconfontCss({
            fontName: 'myapp-icons',
            path: 'src/assets/css/icons_template.scss',
            fontPath: '../fonts/icons/',
            targetPath: '../../css/icons.scss',
            cssClass: 'mu-icon'
        }))
        .pipe(iconfont({
            fontName: 'myapp-icons',
            formats: ['ttf', 'eot', 'woff', 'woff2', 'svg'],
            normalize: true,
            centerHorizontally: true
        }))
        .pipe(gulp.dest('src/assets/fonts/icons'))
});

gulp.task('default', function () {
    gulp.start('icons');
});

我使用的模板:

//src/assets/css/icons_template.scss
@font-face {
  font-family: "<%= fontName %>";
  src: url(<%= fontPath %><%= fontName %>.eot);
  src: url(<%= fontPath %><%= fontName %>.eot?#iefix) format('eot'),
  url(<%= fontPath %><%= fontName %>.woff2) format('woff2'),
  url(<%= fontPath %><%= fontName %>.woff) format('woff'),
  url(<%= fontPath %><%= fontName %>.ttf) format('truetype'),
  url(<%= fontPath %><%= fontName %>.svg#<%= fontName %>) format('svg');
}

@mixin <%= cssClass%>-styles {
  font-family: "<%= fontName %>";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  // speak: none; // only necessary if not using the private unicode range (firstGlyph option)
  text-decoration: none;
  text-transform: none;
}

%<%= cssClass%> {
  @include <%= cssClass%>-styles;
}

@function <%= cssClass%>-char($filename) {
  $char: "";
<% _.each(glyphs, function(glyph) { %>
  @if $filename == <%= glyph.fileName %> {
  $char: "\<%= glyph.codePoint %>";
}<% }); %>

@return $char;
}

@mixin <%= cssClass%>($filename, $insert: before, $extend: true) {
&:#{$insert} {
  @if $extend {
    @extend %<%= cssClass%>;
  } @else {
    @include <%= cssClass%>-styles;
  }
  content: <%= cssClass%>-char($filename);
}
}

<% _.each(glyphs, function(glyph) { %>.<%= cssClass%>-<%= glyph.fileName %> {
  @include <%= cssClass%>(<%= glyph.fileName %>);
}
<% }); %>

Answer 1

这是我用 webpack 设法做到的:

使用webfonts-loader

添加一个 myapp.font.js 文件

module.exports = {
    'files': [
        './icons/*.svg'
    ],
    'cssTemplate': './fonts/myapp_icons_template.css.tpl',
    'fontName': 'myapp-icons',
    'classPrefix': 'myapp-icon-',
    'baseSelector': '.myapp-icon',
    'types': ['eot', 'woff', 'woff2', 'ttf', 'svg'],
    'fileName': 'myapp-icons.[ext]'
};

在导入前一个文件后将其添加到我的 webpack 加载器中:

        {
            test: /\.font\.js/,
            loaders:  [
                'style-loader',
                'css-loader',
                'webfonts-loader'
            ]
        },

然后直接将样式复制到index.html