css - Webpack 4:文件加载器不加载 .css 或 .scss 文件中的资产
问题描述
我正在尝试移动我的一个 .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"
})
]
}
为什么 Webpack 不处理字体和图像?
解决方案
在 webpack 4.32.2 中测试了 file-loader 和 url-loader。
file-loader 仅加载在 .tsx 文件中导入的文件。url-loader 不适合我。
最后,我找到的是 copy-webpack-plugin
推荐阅读
- python - 在 Azure Functions 中导入 Google Cloud python 库时出错
- javascript - 当我尝试将其作为道具传递给其他组件时,获取响应返回未定义
- nosql - 是否使用 Kafka Streams 和/或 KSQL 对来自数据库的数据流进行非规范化处理
- mysql - 在 MySQL 8.0 中,我有一个数据字段类型为 GEOMETRY 的列。为什么我的查询中的值没有一致地显示?
- javascript - 单击按钮时删除交叉并转到下面的行
- android - 我在 android studio 模拟器中运行的应用程序没有加载 localhost 数据库内容
- signalr-hub - 将复杂对象从 signalR .NET Core 3.0 集线器发送到 clientIn
- sql - 我可以在子查询中使用“LIKE”吗
- reactjs - React:按属性值获取标签列表
- git - git checkout 并仅更新不同的子模块