Импорт шрифта Awesome CSS в веб-компонент (FASTElement)

Я пытаюсь включить Font Awesome CSS в FASTElement, например:

      import { css } from '@microsoft/fast-element';
import { Theme } from '../../theme';
import * as style from '../../assets/fontawesome/css/all.css';

export const styles = css`
  ${style}
  
  :host {
    contain: content;
    display: flex;
    flex-direction: row;
    border: 2px solid ${Theme.primaryColor};
    width: 512px;
    height: 256px;
  }
`;

Я думаю, что CSS должен быть строкой, поэтому я попытался сделать это, обновив свой webpack.config.js, который выглядит так:

      const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = function (env, { mode }) {
  const production = mode === 'production';
  return {
    mode: production ? 'production' : 'development',
    devtool: production ? 'source-map' : 'inline-source-map',
    entry: {
      app: './src/main.ts',
      fa: './src/assets/fontawesome/css/all.css'
    },
    output: {
      filename: '[name].[contenthash].bundle.js',
      publicPath: '/',
      clean: true
    },
    resolve: {
      extensions: ['.ts', '.js'],
      modules: ['src', 'node_modules']
    },
    devServer: {
      port: 9000,
      historyApiFallback: true,
      open: !process.env.CI,
      devMiddleware: {
        writeToDisk: true,
      },
      static: {
        directory: path.join(__dirname, './')
      }
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: './index.html'
      }),
    ],
    module: {
      rules: [
        {
          test: /\.ts$/i,
          use: [
            {
              loader: 'ts-loader'
            }
          ],
          exclude: /node_modules/
        },
        {
          test: /\.css$/i,
          use: ['style-loader', 'css-loader'],
        },
      ]
    }
  }
}

Я изменил свою конфигурацию после этого сообщения stackoverflow :

      {
    test: /\.css$/,
    use: [
        'to-string-loader',
        'css-loader'
    ]
}

... но это приводит к тому, что значки Font Awesome за пределами моего компонента полностью перестают отображаться, а значки внутри компонента отображаются как квадратные поля, что может иметь какое-то отношение к шрифтам.

Кому-нибудь удалось импортировать Font Awesome в веб-компоненты вообще и FASTElementс в частности?

0 ответов

Другие вопросы по тегам