Использование семантического пользовательского интерфейса с модулями CSS в Webpack

У меня есть import 'semantic-ui-css/semantic.min.css' в index.js, в соответствии с инструкциями Semantic UI.

До того, как я сделал yarn eject (чтобы включить модули CSS с помощью create-react-app), все работало нормально, но как только я это сделал, я получил следующую ошибку:

Модуль не найден: не удается разрешить «themes/default/assets/fonts/icons.eot» в «[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]'
}

Я добавил его в свой webpack.config.dev.js в массиве rules (после eslint загрузчика и перед большим со всем остальным) но ничего не изменилось.


webpack reactjs css-modules semantic-ui-react semantic-ui
person Eyal C    schedule 06.03.2018    source источник
comment
Что такое КРА? Модуль CSS — это то, что генерирует имена классов, чтобы сохранить область видимости и предотвратить утечку стиля.   -  person felixmosh    schedule 06.03.2018
comment
create-react-app. Я знаком с модулями CSS и использовал их раньше, но не вместе с Semantic UI.   -  person Eyal C    schedule 06.03.2018
comment
Попробуйте переместить импорт в файл css, который будет импортировать файл semantic.css init, но оберните его :global{@import 'semantic.css'}, github.com/css-modules/css-modules#usage-with-preprocessors   -  person felixmosh    schedule 06.03.2018
comment
@felixmosh Имеет ли смысл это делать, если я не использую препроцессоры CSS?   -  person Eyal C    schedule 06.03.2018
comment
он также должен работать, css-loader — это тот, который добавляет поддержку для этого: github .com/webpack-contrib/css-loader#scope   -  person felixmosh    schedule 06.03.2018

Ответы (2)


arrow_upward
2
arrow_downward

Добавьте следующее в раздел правил:

   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

Надеюсь поможет!

person FlyingZipper    schedule 27.05.2018

arrow_upward
1
arrow_downward

У меня была такая же проблема, я решил ее, разделив правила загрузчика css веб-пакета на 2:

  1. Будет включать все, кроме node_modules, использует модули css. Это касается внутренних модулей css.
  2. Будет включать только node_modules, исключая /src. Это касается semantic-ui и любой другой сторонней библиотеки.

Результирующие правила для webpack.config.dev.js, сгенерированные сценарием извлечения CRA, будут выглядеть следующим образом:

// 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',
                }),
              ],
            },
          },
        ],
      },

Я не думаю, что этот ответ является оптимальным, но, безусловно, сработал для меня. Удачи

person Ricardo Leon    schedule 16.05.2018