reactjs - 在 Webpack 中使用带有 CSS 模块的语义 UI

Question

我有在 index.js 中导入 'semantic-ui-css/semantic.min.css'，as instructed by Semantic UI .

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

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

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

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

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

Answer 1

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

   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

希望对您有所帮助!