Импорт шрифта 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
с в частности?