在 Webpack 中使用带有 CSS 模块的语义 UI [英] Using Semantic UI With CSS Modules in Webpack

问题描述

我有在index.js中导入'semantic-ui-css/semantic.min.css'，按照语义 UI 的指示.

I have import 'semantic-ui-css/semantic.min.css' in index.js, as instructed by Semantic UI.

在我执行 yarn eject(使用 create-react-app 启用 CSS 模块)之前，一切正常，但是一旦我这样做，我就收到以下错误:

Before I did yarn eject (to enable CSS modules with create-react-app) everything worked fine, but as soon as I did I got the following error:

找不到模块:无法解析[MY_PROJECT_DIR]/node_modules/semantic-ui-css"中的themes/default/assets/fonts/icons.eot"

Module not found: Can't resolve 'themes/default/assets/fonts/icons.eot' in '[MY_PROJECT_DIR]/node_modules/semantic-ui-css'

我认为这可能是 Webpack 的加载器不处理字体文件的问题，所以我发现了这个:

I thought that it might be an issue with Webpack's loaders' not dealing with font files, so I found this:

{
    test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
    loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
}

我将它添加到 rules 数组中的 webpack.config.dev.js 中(在 eslint 加载器之后和大加载器之前与其他一切)但没有任何改变.

I added it to my webpack.config.dev.js in the rules array (after the eslint loader and before the big one with everything else) but nothing changed.

推荐答案

在规则部分添加以下内容:

Add the following in the rules section:

   const config = {
        entry: {
            vendor: ['semantic-ui-react'],
        },
        ...,
        module: {
            rules: [
                ...,
                {
                    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]',
                    },
                },
            ],
        },
     ...,
    };

    module.exports = config

希望能帮到你！

这篇关于在 Webpack 中使用带有 CSS 模块的语义 UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！