#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, но мы никогда не касались указанных путей. Будет использовать ваше редактирование для большей разборчивости. Спасибо