无法导入语义ui-css

Question

当我semantic ui在index.js文件中导入react css模块时,我收到以下错误.

ERROR in ./~/semantic-ui-css/themes/default/assets/fonts/brand-icons.svg
Module parse failed: C:\Users\dimal\Documents\Work\sample-app\node_modules\semantic-ui-css\themes\default\assets\fonts\brand-icons.svg Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!--
| Font Awesome Free 5.0.8 by @fontawesome - https://fontawesome.com
 @ ./~/css-loader!./~/semantic-ui-css/semantic.min.css 7:196806-196862
 @ ./~/semantic-ui-css/semantic.min.css
 @ ./src/index.js

我的webpack配置如下

var path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'index.js',
        libraryTarget: 'commonjs2'
    },
    module: {
        rules: [{
            test: /\.js$/,
            include: path.resolve(__dirname, 'src'),
            exclude: /(node_modules|bower_components|build)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env']
                }
            }
        },{
            test: /\.(css|less)$/,
            use: ["style-loader", "css-loader", "less-loader"]
        }]
    },
    externals: {
        'react': 'commonjs react'
    }
};

我在这做错了什么？

Answer 1

语义UI CSS文件引用了其他文件,如图像和字体,因此webpack也必须具有这些类型文件的加载器.

确保您有url-loader和file-loader安装包,这些装载机添加到您的WebPack配置:

        {
            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
            loader: require.resolve("url-loader"),
            options: {
                limit: 10000,
                name: "static/media/[name].[hash:8].[ext]",
            },
        },
        {
            test: [/\.eot$/, /\.ttf$/, /\.svg$/, /\.woff$/, /\.woff2$/],
            loader: require.resolve("file-loader"),
            options: {
                name: "/static/media/[name].[hash:8].[ext]",
            },
        }

(您可以根据需要更改文件夹路径)