Webpack字体真棒字体路径错误

时间:2019-06-06 11:36:25

标签: javascript webpack font-awesome

当我运行npm run production时,它将构建我的JS和CSS(来自SASS)并将其放置在我的drupal主题目录中。字体的路径在我的fontawesome.css中不正确。

路径应类似于 ../fonts/vendor/@fortawesome/fontawesome-pro-webwebfa-brands-400.woff?5dd043615247f4082a329ccccaacca7b

/themes/<theme-name>/fonts/vendor/@fortawesome/fontawesome-pro-webwebfa-brands-400.woff?5dd043615247f4082a329ccccaacca7b

但它们的生成方式类似于/fonts/vendor/@fortawesome/fontawesome-pro-webwebfa-brands-400.woff?5dd043615247f4082a329ccccaacca7b

我试图添加一个webpack.config.js文件来使它正常工作,但是我对此不太满意,我真的不确定自己在做什么。我从来没有真正做到这一点,但我在下面包含了我的代码。

const path = require('path');

const config = {
  src: './web/themes/<theme-name>/src/',
  dist: './web/themes/<theme-name>/'
};

module.exports = {
  entry: {
    main: config.src + 'js/app.js' ,
    sass: config.src + 'sass/app.scss'
  },
  output: {
    path: path.resolve(__dirname, config.dist)
  },
  module: {
    rules: [
      {
        test: /\.(eot|woff|woff2|ttf|svg)(\?\S*)?$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: config.dist + 'fonts/',
            publicPath: '/themes/<theme-name>/fonts/'
          }
        }]
      }
    ]
  }
};

任何帮助,将不胜感激。

0 个答案:

没有答案