1
私のフォントパックファイルを参照するためにwebpack configのエイリアスを使用しています。構文に関係なく、フォントファイルを正しく解決できません。他の同様のスタックオーバーフローポストは、同様の動作を示しますが、解決策はありません。webpackを使用してfont-face includeを解決できない
すなわち：Webpack @font-face relative path issue
SCSSファイルで参照フォントや画像の別名を設定するための適切な方法は何ですか？これらの補助資産によって私のsrcディレクトリからdistディレクトリに移動するにはどうすればよいですか？ここで
/
/src
/styles
base.scss
fonts.scss
...
/fonts
myFont.eot
...
/dist
/fonts
/images
/styles
site.css
されている
var mainCss = new ExtractTextPlugin(pathToStyles + "main.css");
module.exports = {
entry: './app.js',
output: { filename: 'bundle.js'},
resolve: {
alias: {
'fonts': path.resolve(__dirname, "src/fonts"),
'styles': path.resolve(__dirname, "src/styles")
}
},
module: {
loaders: [
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file?name=dist/fonts/[name].[ext]'
},
{
test: /\.scss$/,
loader: mainCss.extract({fallback: "style-loader", use: [{
loader: "css-loader"
}, {
loader: "sass-loader"
}]
})
},
{
test: /src\/\.css$/,
loader: ExtractTextPlugin.extract({fallback: "style-loader", use: ["css-loader"]})
}]
},
plugins: [ mainCss ]
};
app.js
require('./src/site.scss');
console.log('hey');
fonts.scss
@font-face {
font-family: 'myFont';
src: url('~fonts/myFont.eot');
}
site.scss
@import "~styles/base/_fonts";
body {
color: red;
}
a {
font-weight:bold;
font-family: 'myFont';
}