Я пытаюсь использовать Semantic-UI-React для основы библиотеки компонентов. По сути, я создаю свой собственный node_module, который в своей основе является оберткой для всех компонентов semantic-ui-Reaction, чтобы я мог импортировать такие компоненты, как этот
import { Button } from 'my-library;
Дополнительным бонусом является то, что, если мне нужны более сложные компоненты, я могу разместить их в одном месте.
Это работает нормально, и CSS для библиотеки семантического пользовательского интерфейса работает отлично, но я сталкиваюсь с большой проблемой с иконками. Я видел, что у многих других людей есть подобные проблемы, но я не нашел никого с моей точной проблемой.
Я пытаюсь создать форму, используя мою библиотеку компонентов. В этой форме есть кнопка, которая использует значки semantic-ui-реакции.
import React from 'react';
import { Header, Button, Icon } from 'my-library';
import 'my-library/assets/semantic/dist/semantic.css';
class Copy extends React.Component {
constructor() {
super();
}
render() {
return (
<div>
<Header as='h1'>Copy</Header>
<Button icon labelPosition='left'>
<Icon name='copy' />
Copy
</Button>
</div>
)
}
}
export default Copy;
Эта форма не работает, как задумано. Стиль для кнопки есть, а иконки нет. Не только это, но я получаю ошибки в консоли, которые говорят
Failed to load resource: the server responded with a status of 404 (Not Found)
Способ, которым в настоящее время это работает, заключается в том, что этот компонент отображается на html-странице, например, так:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link rel="stylesheet" href="~/dist/allstyles.css" />
</head>
<body class="container">
<div id="Index"></div>
<script src="~/dist/Index.js"></script>
</body>
</html>
Я использую extractCSS в веб-пакете для объединения всех моих стилей. Вот мой webpack.config для моего приложения (не моя библиотека)
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('allstyles.css');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new UglifyJsPlugin()],
},
entry: {
Index: path.resolve(__dirname, './wwwroot/react/entrypoints/Index.jsx'),
Test: path.resolve(__dirname, './wwwroot/react/entrypoints/Test.jsx')
},
output: {
path: path.resolve(__dirname, 'wwwroot/dist'),
filename: '[name].js',
publicPath: '/'
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
}),
],
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader', options: {
presets:
['@babel/preset-react' ,'@babel/preset-env']
}
}
},
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' }
]
},
{
test: /\.(woff2?|ttf|eot)$/,
use: {
loader: 'file-loader'
}
},
{
test: /\.(jpg|png|svg)$/,
use: {
loader: 'file-loader'
}
},
{
test: /\.js$|\.jsx$/,
use: {
loader: 'babel-loader'
}
}
]
},
resolve: {
extensions: ['.js', '.jsx']
},
};
Моя библиотека использует немного другой конфиг
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [new UglifyJsPlugin()],
},
entry: './src/index',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.js',
libraryTarget: 'commonjs2'
},
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000
},
devtool: false,
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false,
options: {
context: __dirname
}
}),
],
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.jsx?$/,
use: {
loader: 'babel-loader', options: {
presets:
['@babel/preset-react', '@babel/preset-env']
}
}
},
{
test: /\.scss$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' }
]
},
{
test: /\.(woff2?|ttf|eot)$/,
use: {
loader: 'file-loader'
}
},
{
test: /\.(jpg|png|svg)$/,
use: {
loader: 'file-loader'
}
},
{
test: /\.js$|\.jsx$/,
use: {
loader: 'babel-loader'
}
}
]
},
resolve: {
extensions: ['.js', '.jsx']
},
};
В конечном счете, я надеюсь, что мое приложение сможет получить CSS, находящийся в компоненте копирования import 'my-library/assets/semantic/dist/semantic.css';, для визуализации значков. Поскольку библиотека, использующая пакет semantic-ui-реагирует, имеет доступ к шрифтам в семантическом / dist / themes / default / assets / fonts
Хотя, похоже, это не во все стили, и я не знаю почему.