gpt4 book ai didi

css - 网页包 4 : mini-css-extract-plugin + file-loader not loading assets

转载 作者:技术小花猫 更新时间:2023-10-29 11:24:04 25 4
gpt4 key购买 nike

我正在尝试移动我的一个 .scss 文件中使用的 Assets (图像和字体),但它们似乎被忽略了:

这是我的.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

这里有两个问题:

  1. 字体未编译(No public/fonts/etc...)
  2. 图片未编译

我一直在尝试一切,但我不知道这里会发生什么……有什么想法吗?

最佳答案

我刚刚解决了一个类似的问题。如果将 url 选项更改为 true,您可能会看到失败的图像 URL 引用。

{ loader: 'css-loader', options: { url: false, sourceMap: true } },

或者您可以手动检查路径引用是否正确。

url('../../assets/images/bg.jpg')

我认为没有创建图像文件夹是因为所有图像资源链接都不正确。

对于我正在修复的问题,引用都是错误的,我无法修复它们,所以我只使用了这个 webpack copy plugin将文件复制到正确的 dist 文件夹位置。

关于css - 网页包 4 : mini-css-extract-plugin + file-loader not loading assets,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53918083/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com