Question

我在webpack配置中使用别名来引用我的字体文件。无论语法如何，我都无法正确解析字体文件。其他类似的Stack溢出帖描述了类似的行为，但没有提供解决方案。

ie：Webpack @font-face relative path issue

为SCSS文件中引用的字体和图像设置别名的正确方法是什么？我需要做些什么来确保这些支持资产从我的src目录到我的dist目录？

这是我的目录结构

/
/src
    /styles
        base.scss
        fonts.scss
        ...
    /fonts
        myFont.eot
        ...
/dist
   /fonts
   /images
   /styles
       site.css

这是我的web.config

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';
}

Answer 1

我无法安装＆＃39; file-loader＆＃39;当我玩文字路径到字体时，我发现了这一点。同样有用的是发现如何触发调试输出。

即split

使用webpack

1 个答案: