我有一个webpack项目，在开发过程中一切正常，但是在我构建应用程序时，网站在我的字体文件文件夹中查找错误。我有一个.scss文件，在顶部我指定了一个$font_path = './assets/fonts/';，该文件位于src/scss/utils文件夹中。构建完应用程序后，该应用程序将在..../dist/static/css/static/fonts/filename.hash.ttf等中查找文件，而实际文件位于..../dist/static/fonts文件夹中。
这是我的webpack.common.js文件（这是我的基本应用程序设置）：
'use strict';
const helpers = require('./helpers');
const path = require('path');
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
entry: {
polyfill: '@babel/polyfill',main: path.resolve(__dirname,'../src/main.js'),vendor: path.resolve(__dirname,'../src/vendor.js')
},module: {
rules: [{
test: /\.vue$/,loader: 'vue-loader',include: [helpers.root('src')]
},{
test: /\.html$/,use: [
'html-loader'
]
},{
test: /\.(jpe?g|gif|png)$/,use: {
loader: 'file-loader',options: {
name: '[name].[hash].[ext]',outputPath: 'static/img'
}
}
},{
test: /\.(ttf|eot|woff2?|otf)$/,use: {
loader: 'url-loader',options: {
name: 'static/fonts/[name].[hash].[ext]',limit: 10000
}
}
},{
test: /\.ico$/,outputPath: 'static/img/icons'
}
}
},{
test: /\.svg$/,use: [{
loader: 'svg-sprite-loader',options: {
spriteFilename: 'sprites.svg',runtimeCompat: true
}
},{
loader: 'svgo-loader',options: {
removeTitle: true,removeUselessStrokeAndFill: true
}
}
]
}
]
},plugins: [
new VueLoaderPlugin(),]
};
这是我用于构建的webpack.prod.js文件配置：
const common = require('./webpack.common');
const merge = require('webpack-merge');
const helpers = require('./helpers');
const webpack = require('webpack');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetsplugin = require('optimize-css-assets-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin');
process.env.NODE_ENV = "production";
let dateStamp = new Date().toISOString().slice(0,10).replace(/-/g,"");
module.exports = merge(common,{
mode: "production",resolve: {
extensions: [ '.js','.vue' ],alias: {
'vue$': 'vue/dist/vue.runtime.min.js','@': helpers.root('src')
}
},output: {
filename: `[name].${dateStamp}.[contentHash].bundle.js`,path: helpers.root('dist')
},optimization: {
runtimeChunk: 'single',minimizer: [
new OptimizeCssAssetsplugin(),// CSS Minimization
new TerserPlugin() // JS Minimization (UglifyJS replacement)
],splitChunks: {
chunks: "all",maxInitialRequests: Infinity,minSize: 0
}
},plugins: [
new webpack.EnvironmentPlugin({NODE_ENV: 'production'}),new MiniCssExtractPlugin({
filename: `static/css/[name].${dateStamp}.[contentHash].css`
}),new CleanWebpackPlugin(),new HtmlWebpackPlugin({
template: "./index.html",inject: true,minify: {
removeAttributeQuotes: true,collapseWhitespace: true,removeComments: true
}
})
],module: {
rules: [
{
test: /\.(scss|sass)$/,use: [
MiniCssExtractPlugin.loader,"css-loader","sass-loader"
]
},{
test: /\.css$/,use: [
'style-loader','css-loader'
]
}
]
}
});
希望您能发现我的错误。
编辑
添加./src/scss/utils/fonts.scss的原因是我有点不知道该怎么办。
$font_path: './assets/fonts/';
/* Comfortaa */
@font-face {
font-family: "Comfortaa";
font-weight: 300;
font-style: normal;
src: url($font_path + 'Comfortaa/Comfortaa_Thin.ttf') format("truetype")
}
@font-face {
font-family: "Comfortaa";
font-weight: 400;
font-style: normal;
src: url($font_path + 'Comfortaa/Comfortaa_Regular.woff') format("woff"),url($font_path + 'Comfortaa/Comfortaa_Regular.woff2') format("woff2"),url($font_path + 'Comfortaa/Comfortaa_Regular.ttf') format("truetype"),url($font_path + 'Comfortaa/Comfortaa_Regular.eot') format("embedded-opentype"),// url($font_path + 'Comfortaa/Comfortaa_Regular.svg') format("svg")
}
@font-face {
font-family: "Comfortaa";
font-weight: 700;
font-style: normal;
src: url($font_path + 'Comfortaa/Comfortaa_Bold.ttf') format("truetype")
}
/* ROBOTO */
@font-face {
font-family: "Roboto";
font-weight: 100;
font-style: normal;
src: url($font_path + 'Roboto/Roboto-Thin.woff') format("woff"),url($font_path + 'Roboto/Roboto-Thin.woff2') format("woff2"),url($font_path + 'Roboto/Roboto-Thin.ttf') format("truetype"),url($font_path + 'Roboto/Roboto-Thin-webfont.eot') format("embedded-opentype"),// url($font_path + 'Roboto/Roboto-Thin-webfont.svg') format("svg");
}
@font-face {
font-family: "Roboto";
font-weight: 300;
font-style: normal;
src: url($font_path + 'Roboto/Roboto-Light.woff') format("woff"),url($font_path + 'Roboto/Roboto-Light.woff2') format("woff2"),url($font_path + 'Roboto/Roboto-Light.ttf') format("truetype"),url($font_path + 'Roboto/Roboto-Light-webfont.eot') format("embedded-opentype"),// url($font_path + 'Roboto/Roboto-Light-webfont.svg') format("svg");
}
@font-face {
font-family: "Roboto";
font-weight: 400;
font-style: normal;
src: url($font_path + 'Roboto/Roboto-Regular.woff') format("woff"),url($font_path + 'Roboto/Roboto-Regular.woff2') format("woff2"),url($font_path + 'Roboto/Roboto-Regular.ttf') format("truetype"),url($font_path + 'Roboto/Roboto-Regular-webfont.eot') format("embedded-opentype"),// url($font_path + 'Roboto/Roboto-Regular-webfont.svg') format("svg");
}
@font-face {
font-family: "Roboto";
font-weight: 500;
font-style: normal;
src: url($font_path + 'Roboto/Roboto-Medium.woff') format("woff"),url($font_path + 'Roboto/Roboto-Medium.woff2') format("woff2"),url($font_path + 'Roboto/Roboto-Medium.ttf') format("truetype"),url($font_path + 'Roboto/Roboto-Medium-webfont.eot') format("embedded-opentype"),// url($font_path + 'Roboto/Roboto-Medium-webfont.svg') format("svg");
}
@font-face {
font-family: "Roboto";
font-weight: 700;
font-style: normal;
src: url($font_path + 'Roboto/Roboto-Bold.woff') format("woff"),url($font_path + 'Roboto/Roboto-Bold.woff2') format("woff2"),url($font_path + 'Roboto/Roboto-Bold.ttf') format("truetype"),url($font_path + 'Roboto/Roboto-Bold-webfont.eot') format("embedded-opentype"),// url($font_path + 'Roboto/Roboto-Bold-webfont.svg') format("svg");
}
/* SOURCE SANS PRO */
@font-face {
font-family: "Source Sans Pro";
font-weight: 100;
font-style: normal;
src: url($font_path + 'SourceSans/SourceSansPro-ExtraLight.otf.woff') format("woff"),url($font_path + 'SourceSans/SourceSansPro-ExtraLight.otf.woff2') format("woff2"),url($font_path + 'SourceSans/SourceSansPro-ExtraLight.ttf') format("truetype"),url($font_path + 'SourceSans/SourceSansPro-ExtraLight.eot') format("embedded-opentype"),url($font_path + 'SourceSans/SourceSansPro-ExtraLight.otf') format("otf");
}
@font-face {
font-family: "Source Sans Pro";
font-weight: 300;
font-style: normal;
src: url($font_path + 'SourceSans/SourceSansPro-Light.otf.woff') format("woff"),url($font_path + 'SourceSans/SourceSansPro-Light.otf.woff2') format("woff2"),url($font_path + 'SourceSans/SourceSansPro-Light.ttf') format("truetype"),url($font_path + 'SourceSans/SourceSansPro-Light.eot') format("embedded-opentype"),url($font_path + 'SourceSans/SourceSansPro-Light.otf') format("otf");
}
@font-face {
font-family: "Source Sans Pro";
font-weight: 400;
font-style: normal;
src: url($font_path + 'SourceSans/SourceSansPro-Regular.otf.woff') format("woff"),url($font_path + 'SourceSans/SourceSansPro-Regular.otf.woff2') format("woff2"),url($font_path + 'SourceSans/SourceSansPro-Regular.ttf') format("truetype"),url($font_path + 'SourceSans/SourceSansPro-Regular.eot') format("embedded-opentype"),url($font_path + 'SourceSans/SourceSansPro-Regular.otf') format("otf");
}
@font-face {
font-family: "Source Sans Pro";
font-weight: 500;
font-style: normal;
src: url($font_path + 'SourceSans/SourceSansPro-Semibold.otf.woff') format("woff"),url($font_path + 'SourceSans/SourceSansPro-Semibold.otf.woff2') format("woff2"),url($font_path + 'SourceSans/SourceSansPro-Semibold.ttf') format("truetype"),url($font_path + 'SourceSans/SourceSansPro-Semibold.eot') format("embedded-opentype"),url($font_path + 'SourceSans/SourceSansPro-Semibold.otf') format("otf");
}
@font-face {
font-family: "Source Sans Pro";
font-weight: 700;
font-style: normal;
src: url($font_path + 'SourceSans/SourceSansPro-Bold.otf.woff') format("woff"),url($font_path + 'SourceSans/SourceSansPro-Bold.otf.woff2') format("woff2"),url($font_path + 'SourceSans/SourceSansPro-Bold.ttf') format("truetype"),url($font_path + 'SourceSans/SourceSansPro-Bold.eot') format("embedded-opentype"),url($font_path + 'SourceSans/SourceSansPro-Bold.otf') format("otf");
}