Vue -svg-loader не позволяет webpack обрабатывать правило шрифтов - PullRequest
0 голосов
/ 12 апреля 2020

У меня есть проект, в котором используется vue -svg-loader и шрифт awesome 5. Моя проблема в том, что после добавления vue -svg-loader я не вижу никаких значков FA. Вместо них получаются пустые квадраты. Но когда я комментирую правило в vue .config. js все в порядке. Вот мой vue .config. js:

  module.exports = {
  "transpileDependencies": [
    "vuetify"
  ],
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg');

    svgRule.uses.clear();

    svgRule
      .use('babel-loader')
      .loader('babel-loader')
      .end()
      .use('vue-svg-loader')
      .loader('vue-svg-loader');
  },
}

После vue проверки> вывода. js:

{
        test: /\.(svg)(\?.*)?$/,
        use: [
          /* config.module.rule('svg').use('babel-loader') */
          {
            loader: 'babel-loader'
          },
          /* config.module.rule('svg').use('vue-svg-loader') */
          {
            loader: 'vue-svg-loader'
          }
        ]
      },
      /* config.module.rule('media') */
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        use: [
          /* config.module.rule('media').use('url-loader') */
          {
            loader: 'C:\\pet_projects\\hello-world\\node_modules\\url-loader\\dist\\cjs.js',
            options: {
              limit: 4096,
              fallback: {
                loader: 'C:\\pet_projects\\hello-world\\node_modules\\file-loader\\dist\\cjs.js',
                options: {
                  name: 'media/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },
      /* config.module.rule('fonts') */
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/i,
        use: [
          /* config.module.rule('fonts').use('url-loader') */
          {
            loader: 'C:\\pet_projects\\hello-world\\node_modules\\url-loader\\dist\\cjs.js',
            options: {
              limit: 4096,
              fallback: {
                loader: 'C:\\pet_projects\\hello-world\\node_modules\\file-loader\\dist\\cjs.js',
                options: {
                  name: 'fonts/[name].[hash:8].[ext]'
                }
              }
            }
          }
        ]
      },

Мой шаблон:

   <v-btn>
         <v-icon>fas fa-code</v-icon>
   </v-btn>

enter image description here enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...