Question

我正在用css文件编写组件，但似乎不能包含字体文件。

以下是我的代码：

@Component({
    selector: 'app',
    pipes: [TranslatePipe],
    directives: [ROUTER_DIRECTIVES],
    styleUrls: ['./app.css'],
    encapsulation: ViewEncapsulation.None,
    templateUrl: './app.html'
})

我写了我的webpack配置：

    {
        test: /\.css$/,
        loaders: ['to-string-loader', 'css-loader']
    },
    {
        test: /\.scss$/,
        loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader
    },
    {
        test: /\.html$/,
        loader: 'raw-loader',
        exclude: [helpers.root('src/index.html')]
    },
    {
        test: /.(png|woff(2)?|eot|ttf|svg)$/,
        loader: 'url-loader'
    }

在我的app.css中，我有一些字体：

src:url(./fonts/nucleo-mini.eot) format("embedded-opentype");
src:url(./fonts/nucleo-mini.woff2) format("woff2");
src:url(./fonts/nucleo-mini.woff) format("woff");
src:url(./fonts/nucleo-mini.ttf) format("truetype");
src:url(./fonts/nucleo-mini.svg) format("svg");

但它不起作用：

ERROR in ./src/app/app.css
Module build failed: /Users/liushun/pxx/plat/src/app/fonts/nucleo-mini.eot:1
(function (exports, require, module, __filename, __dirname) { :

我将我的css加载程序更改为['raw-loader', 'url-loader']，错误已经消失，但它会在我的<style>...</style>标记中插入一个脚本，页面无法读取。

有人能帮助我吗？

我的css文件中的Angular2字体无法加载

0 个答案: