Файлы успешно отправлены, ожидание результатов проверки типа… застрял при импорте модулей SASS

#reactjs #typescript #webpack #sass #create-react-app

Вопрос:

Проблема

Когда в любой файл машинописи импортируются переменные SASS, сохранение изменений приводит к зависанию на Files successfully emitted, waiting for typecheck results... вкладке браузера с открытым сервером разработчиков.

Что я упускаю? У меня заканчиваются ресурсы? Есть ли лучший способ импортировать переменные SASS в файлы машинописного текста?

Файлы

_ variables.scss

введите описание изображения здесь

_экспорт.модуль.scss

введите описание изображения здесь

импорт переменных введите описание изображения здесь

Соответствующая конфигурация веб-пакета:

 {
    test: /.(scss|sass)$/,
    exclude: /.module.(scss|sass)$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: { importLoaders: 3, sourceMap: true }
      },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: [Function: plugins],
          sourceMap: true
        }
      },
      {
        loader: 'resolve-url-loader',
        options: {
          sourceMap: true,
          root: './src'
        }
      },
      {
        loader: 'sass-loader',
        options: { sourceMap: true }
      }
    ],
    sideEffects: true
  },
  {
    test: /.module.(scss|sass)$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          importLoaders: 3,
          sourceMap: true,
          modules: { getLocalIdent: [Function: getLocalIdent] }
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: [Function: plugins],
          sourceMap: true
        }
      },
      {
        loader: 'resolve-url-loader',
        options: {
          sourceMap: true,
          root: './src'
        }
      },
      {
        loader: 'sass-loader',
        options: { sourceMap: true }
      }
    ]
  },
 

Редактировать

В webpack я по ошибке вставил ignorePlugin. Устранение этой ошибки решило проблему зависания браузера, но не Files successfully emitted, waiting for typecheck results... проблему

Ответ №1:

Использование абсолютных путей затрудняет совместное использование конфигурации с другими разработчиками. Вы можете использовать имя загрузчика непосредственно в конфигурации:

 {
    test: /.(scss|sass)$/,
    exclude: /.module.(scss|sass)$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: { importLoaders: 3, sourceMap: true }
      },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: [Function: plugins],
          sourceMap: true
        }
      },
      {
        loader: 'resolve-url-loader',
        options: {
          sourceMap: true,
          root: './src'
        }
      },
      {
        loader: 'sass-loader',
        options: { sourceMap: true }
      }
    ],
    sideEffects: true
  },
  {
    test: /.module.(scss|sass)$/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          importLoaders: 3,
          sourceMap: true,
          modules: { getLocalIdent: [Function: getLocalIdent] }
        }
      },
      {
        loader: 'postcss-loader',
        options: {
          ident: 'postcss',
          plugins: [Function: plugins],
          sourceMap: true
        }
      },
      {
        loader: 'resolve-url-loader',
        options: {
          sourceMap: true,
          root: './src'
        }
      },
      {
        loader: 'sass-loader',
        options: { sourceMap: true }
      }
    ]
  },
 

Комментарии:

1. Может быть, то, что у меня есть, — это то, что выводит CRA? Мы используем рескрипты для небольшой настройки CRA, но мы никогда не касались указанных путей. Будет использовать ваше редактирование для большей разборчивости. Спасибо