Webpack 4: mini-css-extract-plugin + файловый загрузчик, не загружающий ресурсы
Я пытаюсь переместить ресурсы (изображения и шрифты), используемые в одном из моих файлов .scss, но кажется, что они игнорируются:
Это мой файл .scss:
@font-face {
font-family: 'myfont';
src: url('../../assets/fonts/myfont.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
body {
color: red;
font-family: 'myfont';
background: url('../../assets/images/bg.jpg');
}
А это мой webpack.config.js:
const path = require('path');
const { CheckerPlugin } = require('awesome-typescript-loader');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
target: 'node',
entry: path.resolve(__dirname, 'server.tsx'),
output: {
filename: 'server_bundle.js',
path: path.resolve(__dirname, 'build'),
publicPath: '/build'
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
},
module: {
rules: [{
test: /\.(tsx|ts)?$/,
loader: 'awesome-typescript-loader',
options: {
jsx: 'react'
}
},
{
test: /\.(scss|sass|css)$/,
use: [
MiniCssExtractPlugin.loader,
{ loader: 'css-loader', options: { url: false, sourceMap: true } },
{ loader: 'sass-loader', options: { sourceMap: true } },
]
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/,
loader: 'file-loader',
options: { outputPath: 'public/images' }
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: 'file-loader',
options: { outputPath: 'public/fonts' }
}
]
},
plugins: [
new CheckerPlugin(),
new MiniCssExtractPlugin({
filename: 'public/styles_bundle.css',
chunkFilename: "public/styles/[id].css"
})
]
}
Я получаю этот файл .css в моем браузере как результат (Обратите внимание на название изображения):
body {
color: red;
background: url("../../assets/images/myimage.jpg");
}
И в моем каталоге public я получаю следующее:
public/
styles_bundle.css
Здесь есть две проблемы:
- Шрифты не компилируются (Нет паблика / шрифтов / и т.д ...)
- Изображения не компилируются
Я все перепробовал, но не знаю, что здесь может происходить ... Есть идеи?
Что, если вы не укажете опцию outputPath?
Тоже не повезло :(
@danielrvt Любое решение?
Хотел бы увидеть ответ на это.
Невероятно, как мало общепринятых ответов с загрузчиками веб-пакетов. Кажется, никто не знает, что происходит.
Ответы 5
Я только что исправил похожую проблему. Если вы измените параметр url на true, вы можете увидеть ошибочные ссылки на URL-адреса изображений.
{ loader: 'css-loader', options: { url: false, sourceMap: true } },
Или вы можете вручную проверить правильность ссылки на путь.
url('../../assets/images/bg.jpg')
Я думаю, что папка изображений не создается, потому что все ссылки на ресурсы изображений неверны.
Для проблемы, которую я исправлял, все ссылки были неправильными, и я не мог их исправить, поэтому я просто использовал этот плагин копирования webpack для копирования файлов в правильное расположение папки dist.
вам нужен url-загрузчик
{
test: /\.(jpg|png|gif|woff|eot|ttf|svg)/,
use: {
loader: 'url-loader', // this need file-loader
options: {
limit: 50000
}
}
}
попробуйте конфигурацию ниже
{
test: /\.s[ac]ss$/i,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: ''
}
},
{
loader: "css-loader",
options: { sourceMap: true}
},{
loader: "sass-loader",
options: { sourceMap: true }
}
]
},
{
test: /\.(png|jpg|jpeg|gif)$/i,
loader: 'file-loader',
options: { outputPath: 'assets/images', publicPath: '../images', useRelativePaths: true }
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
loader: 'file-loader',
options: { outputPath: 'assets/fonts', publicPath: '../fonts', useRelativePaths: true }
}
После этого мой scss-файл начал принимать относительный URL-адрес, и скомпилированные файлы также соответствующим образом отображались с использованием относительного пути.
У меня тоже была эта проблема. Я использовал следующие версии:
package.json
"mini-css-extract-plugin": "^0.10.1",
"webpack": "^5.3.1",
Для меня все компилировалось нормально, пока я не добавил в файл scss следующее:
.xmas {
background-image: url("./img/Xmas2020/SurveyBanner.png");
height: 150px;
}
URL-адрес фонового изображения был проблемой. Когда я изменил его на абсолютный путь, он сработал:
.xmas {
background-image: url("/img/Xmas2020/SurveyBanner.png");
height: 150px;
}
webpack.config.js
Это просто, чтобы показать, как я помещал изображения в выходной каталог. Думаю, есть разные способы сделать это, но я использовал CopyWebpackPlugin.
plugins: [
new CopyWebpackPlugin({
patterns: [
{ from: './src/static/img', to: './img', force: true },
]
}),
]
Мне помогла эта ссылка https://github.com/webpack-contrib/mini-css-extract-plugin/issues/286#issuecomment-455917803
mini-css-extract-plugin имеет параметр publicPath (см. здесь). Он в основном сообщает сгенерированному css, где должны быть найдены внешние ресурсы, такие как шрифты, изображения и т. д. В моем случае, установив для него значение «../» и настроив все загрузчики файлов в соответствующие каталоги, это сработало отлично.
В основном выглядит так:
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
publicPath: '/public/path/to/', // <-- This is what was helping.
},
},
'css-loader',
],
},
],
Касательно 2: в вашей сборке имена изображений по умолчанию хешируются для включения кеширования (webpack.js.org/guides/caching). Чтобы изменить это, добавьте свойство
name: 'images/[name][hash:8].[ext]'к вашим параметрам в правилах файла изображения (удалите [hash: 8], если вы не хотите использовать хеш).