Angular2/Webpack: как загружать шрифты, импортированные внутри файлов css?

Question

Я использую Angular2 beta.15 и webpack 1.12.14.

У меня есть один .css и один .scss-файл в app.component.ts как глобальные шаблоны.

@Component({ 
    selector: 'my-app', 
    templateUrl: 'app/app.component.html', 
    styles: [ 
     require('../stylesheets/css/main.min.css'), 
     require('../sass/example.scss') 
    ], 
    encapsulation: ViewEncapsulation.None, 
    }) 

И внутри .css файл, некоторые шрифты импортируются, как показано ниже,

@font-face { 
    font-family: 'Helvetica Neue'; 
    src: url(fonts/light/helvetica-neue-light.eot) format("eot"), 
     url(fonts/light/helvetica-neue-light.woff2) format("woff2"), 
     url(fonts/light/helvetica-neue-light.woff) format("woff"), 
     url(fonts/light/helvetica-neue-light.ttf) format("truetype"); 
    font-weight: 300; 
    font-style: normal 
} 

В webpack.config.js, у меня есть погрузчики для .css, .scss, и шрифты, как показано ниже

{ 
    test: /\.scss$/, 
    exclude: /node_modules/, 
    loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader 
    }, 
    { 
     test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, 
     loader: 'url-loader' 
    }, 
    { 
    test: /\.css$/, 
    loaders: ['style', 'css'] 
    }, 

When Я запустил webpack -display-error-details, нет никакой ошибки, но когда я запустил сервер для запуска моего приложения, я получил ошибку, как показано ниже.

EXCEPTION: Error during instantiation of Token Promise<ComponentRef>!. 
ORIGINAL EXCEPTION: Expected 'styles' to be an array of string 

Если изменить CSS загрузчик

{ 
    test: /\.css$/, 
    loader: 'url-loader' //or use 'raw-loader' 
    }, 

эти исключения исчезли, и приложение было начать, но я получил некоторые 404 запросов об ошибке для этих шрифтов в консоли браузера, они не загружены в все. Итак, не могли бы вы дать мне несколько указателей? Я подозреваю, что что-то не так в настройках моего загрузчика.

Answer 1

Когда вы соединяете несколько погрузчиков вместе, порядок их действий выполняется справа налево.

Затем полученный код от загрузчика передается следующему. В этом случае, вы хотите приковать raw-loader и url-loader, как это даст вам желаемый результат:

loaders: ['raw-loader', 'url-loader'] 

Так как вам нужно сначала иметь ваши URLs шрифта, автоматически преобразуются в base64, закодированных в стилях, вы должны сначала звоните url-loader в свою цепочку. Затем, поскольку вы хотите импортировать этот файл в качестве module.exports, вы вызываете raw-loader.

Таким образом, в цепи происходит следующее:

1. url-loader: Преобразует все ваши ссылки URL-адрес для статических активов в base64:data.
2. raw-loader: принимает файл, и заворачивает весь свой код в строку, а затем делает его ввозу, добавив module.exports='string'

Answer 2

 Just Try once to keep under one dir both font and css 

     // and give the reference onces in webpack.config.rb 

     # Set this to the root of your project when deployed: 
     http_path = "/" 
     css_dir = "app/assets/css" 
     sass_dir = "app/assets/sass" 

Answer 3

попробовать это:

@Component({ 
selector: 'my-app', 
templateUrl: 'app/app.component.html', 
styles: [ 
    require('../stylesheets/css/main.min.css').toString(), 
    require('!style-loader!css-loader!less-loader!../less/example.less').toString() 
]}) 

Я khow в commanand за меньшие, аналогичную команду должен быть доступен для scss