Как настроить module css в React в VS Code для вложенной папки?
Структура проекта следующая
spoiler┣ .github
┣ src
┃ ┣ app
┣ .gitignore
┣ Dockerfile
module css настроен через typescript-plugin-css-modules,
если я открываю в редакторе папку src - то всё прекрасно работает, у css-modules работает автозаполнение и подсветка ошибок, но если открывать весь проект целиком, то ничего этого нет.
куда копать?
Дополнительно:
работает автозаполнение и подсветка
для начала нужно понять, какой плагин этим занимается
Ответы:
Если вы работаете с проектом, где package.json находится не в корневой папке, где вы открываете VS Code, то действительно, могут возникнуть проблемы с распознаванием TypeScript и соответствующих плагинов, таких как typescript-plugin-css-modules. Вот несколько шагов, которые могут помочь решить эту проблему:
Убедитесь, что у вас установлен TypeScript в рабочей области, где находится ваш package.json. Это может потребовать запуска команды установки в соответствующей подпапке.
Настройте VS Code для использования версии TypeScript из вашей рабочей области. Это можно сделать, выбрав версию TypeScript в нижнем правом углу редактора или через настройки settings.json, указав путь к нужной версии TypeScript.
Проверьте, правильно ли настроен tsconfig.json. Убедитесь, что путь к плагину typescript-plugin-css-modules указан относительно корня рабочей области, где находится package.json.
Используйте многокорневые рабочие области в VS Code, если это возможно. Это позволит вам иметь несколько package.json файлов и соответствующие конфигурации TypeScript в одной рабочей области.
Если проблема сохраняется, возможно, потребуется более детальная настройка или создание пользовательского скрипта для запуска TypeScript из нужной папки.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для настройки модульных CSS в React во вложенной папке в VS Code, вам следует следовать нескольким простым шагам.
1. Создайте файл `jsconfig.json` в корне вашего проекта (если его еще нет) и добавьте следующий код:
```json
{
"compilerOptions": {
"baseUrl": "src"
},
"include": ["src"]
}
```
2. Создайте папку `src` в корне вашего проекта, если ее еще нет, и в этой папке создайте папку `components`.
3. В папке `components` создайте ваш компонент, например `MyComponent.js`.
4. Создайте файл стилей для вашего компонента, например `MyComponent.module.css`.
5. В вашем компоненте `MyComponent.js` импортируйте стили следующим образом:
```jsx
import React from 'react';
import styles from './MyComponent.module.css';
const MyComponent = () => {
return (
Hello, World!
);
};
export default MyComponent;
```
6. После этого вы можете использовать стили из файла `MyComponent.module.css` в вашем компоненте.
Теперь у вас должна быть настроена поддержка модульных CSS в React во вложенной папке в VS Code. Не забудьте сохранить все изменения и перезапустить сервер разработки, чтобы увидеть эти изменения в браузере.