我试图移动一个.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
这里有两个问题:
- 字体未经编译 (没有 public/fonts/etc…)
- 图像未经编译
我已经尝试了很多方法,但是不知道这里可能出了什么问题……有任何想法吗?
name: 'images/[name][hash:8].[ext]'
属性(如果不想使用哈希,则删除 [hash:8])。 - mtxoutputPath
选项会发生什么? - Slbox