Webpack 4:mini-css-extract-plugin +文件加载器未加载资产 [英] Webpack 4: mini-css-extract-plugin + file-loader not loading assets
问题描述
我正在尝试移动我的.scss
个文件之一中使用的素材资源(图像和字体),但似乎它们被忽略了:
I'm trying to move assets (images and fonts) used in one of my .scss
files, but it seems that they get ignored:
这是我的 .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 文件作为输出(注意图像名称):
I'm getting this .css file in my browser as the output (Note the name of the image):
body {
color: red;
background: url("../../assets/images/myimage.jpg");
}
在我的public
目录中,我得到了:
And in my public
directory I get this:
public/
styles_bundle.css
这里有两个问题:
- 字体未编译(无公开/字体/等... )
- 图像未编译
我一直在尝试一切,但是我不知道这里可能会发生什么...有什么想法吗?
I've been trying everything, but I don't know what may be happening here... Any Ideas?
推荐答案
我刚刚解决了一个类似的问题.如果将url选项更改为true,则可能会看到失败的图像URL引用.
I have just fixed a similar issue. If you change the url option to true, you might see failed image URL references.
{ loader: 'css-loader', options: { url: false, sourceMap: true } },
或者您可以手动检查路径引用是否正确.
Or you can manual check whether the path reference is correct.
url('../../assets/images/bg.jpg')
我认为由于所有图像资源链接都不正确,所以无法创建图像文件夹.
I think the images folder doesn't get created because all the image resource links are incorrect.
对于我要解决的问题,引用均不正确,我无法对其进行修复,因此我只使用了 webpack复制插件可将文件复制到正确的dist文件夹位置.
For the problem I was fixing, the references were all wrong and I couldn't fix them so I just used this webpack copy plugin to copy files to the right dist folder location.
这篇关于Webpack 4:mini-css-extract-plugin +文件加载器未加载资产的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!