Question

我有 import 'semantic-ui-css/semantic.min.css'中的index.js，as instructed by Semantic UI。

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

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

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

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

我已将其添加到webpack.config.dev.js数组中的rules（eslint加载器之后和其他所有加载之前的大文章之前），但没有任何更改。

Answer 1

我遇到了同样的问题，我通过将webpack的css加载器规则分成2来解决了这个问题：

将包含除node_modules之外的所有内容，使用css模块。这将处理内部css模块。
只包含node_modules，exclude / src。这将处理semantic-ui和任何其他第三方库

由CRA弹出脚本生成的webpack.config.dev.js生成的规则如下所示：

// Internal CSS
      // "postcss" loader applies autoprefixer to our CSS.
      // "css" loader resolves paths in CSS and adds assets as dependencies.
      // "style" loader turns CSS into JS modules that inject <style> tags.
      // In production, we use a plugin to extract that CSS to a file, but
      // in development "style" loader enables hot editing of CSS.
      {
        test: /\.css$/,
        exclude: /node_modules/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]'
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              // Necessary for external CSS imports to work
              // https://github.com/facebookincubator/create-react-app/issues/2677
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
        ],
      },
// External CSS
      {
        test: /\.css$/,
        include: /node_modules/,
        exclude: /src/,
        use: [
          require.resolve('style-loader'),
          {
            loader: require.resolve('css-loader'),
            options: {
              importLoaders: 1,
            },
          },
          {
            loader: require.resolve('postcss-loader'),
            options: {
              // Necessary for external CSS imports to work
              // https://github.com/facebookincubator/create-react-app/issues/2677
              ident: 'postcss',
              plugins: () => [
                require('postcss-flexbugs-fixes'),
                autoprefixer({
                  browsers: [
                    '>1%',
                    'last 4 versions',
                    'Firefox ESR',
                    'not ie < 9', // React doesn't support IE8 anyway
                  ],
                  flexbox: 'no-2009',
                }),
              ],
            },
          },
        ],
      },

我不认为这个答案是最佳的，但肯定对我有用。祝你好运

Answer 2

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

   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

2 个答案: