Question

我正在尝试将Semantic-UI-React用作组件库的基础。本质上，我正在创建自己的node_module，它的基础是所有语义ui反应组件的包装，以便可以导入这样的组件 import { Button } from 'my-library; 额外的好处是，如果我需要更复杂的组件，则可以将它们全部集中在一个地方。

这工作正常，语义ui库的CSS似乎运行良好，但是我遇到了一个带有图标的大问题。我已经看到很多其他人也有类似的问题，但是我还没有找到确切问题的人。

我正在尝试使用我的组件库创建一个表单。该表单具有一个使用语义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>

我正在webpack中使用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']
  },

};

最终，我希望我的应用程序可以获取位于复制组件import 'my-library/assets/semantic/dist/semantic.css';中的css来呈现图标。由于使用语义ui-react程序包的库可以访问语义/ dist / themes / default / assets / fonts中的字体

虽然它似乎并没有成为所有样式，但我不知道为什么。

无法从组件库中加载语义UI反应图标

0 个答案: