Vấn đề của tôi là nếu tôi không chỉ định miền hoàn chỉnh trong tùy chọn output.publicPath config; sau đó url không tải đúng (ít nhất là phông chữ).Webpack: Tôi có phải chỉ định miền trong publicPath cho url() chỉ thị để hoạt động trong CSS không?
webpack cấu hình của tôi:
output: {
...
publicPath: '/assets/'
},
module: {
loaders: {
{
test: /\.less$/,
loader: "style!css?sourceMap!less?sourceMap"
},
{
test: /\.(png|jpg|svg|gif|eot|woff|ttf)$/,
loader: 'file-loader?name=[path][name]-[hash].[ext]'
}
}
},
debug: true,
devtool: 'eval'
Tôi có một tập tin ít biết: Thao tác
@font-face {
font-family: 'new-sources';
src: url('../../fonts/sources-icons-rev-4.eot');
...
}
Máy chủ của tôi là trong http://localhost:5000.
Khi tôi kiểm tra CSS tạo ra trong khi gỡ lỗi trong chrome tôi thấy rằng nó đã được thay thế bởi:
@font-face {
font-family: 'new-sources';
src: url(/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot);
...
}
Mà dường như đúng! Nhưng không hoạt động công cụ của Chrome dev báo lỗi: "Không thể giải mã phông chữ đã tải xuống: http://localhost:5000/widgets/damian/9789/en" Chỉ ra rằng nó đã cố gắng tải phông chữ url, nhưng url đó là vị trí hiện tại của tôi, nơi tôi đang phân phối html. Và tôi không biết tại sao lại cố gắng lấy font từ url đó.
Nếu tôi truy cập: http://localhost:5000/assets/sdk/v1/fonts/sources-icons-rev-4-fad6f81d012ba56b350abdc714d1fa5a.eot. Nó hoạt động.
Mọi thứ được giải quyết khi tôi thay đổi publicPath thành: 'http://localhost:5000/assets/'. Nhưng đó là điều tôi muốn tránh, và trong mọi trường hợp, tôi muốn hiểu tại sao điều này lại xảy ra. Tôi đoán, đó là kể từ khi bộ nạp kiểu, thêm CSS dưới dạng Blob, css làm mất khái niệm 'miền hiện tại' để các url không có miền trong đó, hành động lạ lẫm.
Nhưng đồng thời, điều này sẽ xảy ra với mọi người sử dụng webpack với CSS và tôi chưa thấy bất kỳ nhận xét nào về nó. : S
Cảm ơn !!!