Невозможно импортировать CSS с помощью "babel-plugin-реагировать-css-modules" - получить "ParseError: Неожиданный токен"

Question

Пожалуйста, смотрите https://github.com/gajus/babel-plugin-react-css-modules/issues/162 для полного описания проблемы.

Git repo = https://github.com/basher/react-no-webpack

Это простой POC / scaffold для библиотеки React UI без Webpack или Gulp, но он должен поддерживать CSS Modules + Sass.

• Я просто пытаюсь использовать Babel + Browserify.
• И выполнение сценариев NPM непосредственно из "package.json".

У меня есть образец компонента виджета, который импортирует файл CSS, и другой компонент, который импортирует файл Sass. Ошибка происходит при разборе содержимого обоих файлов CSS + Sass - например, Transpiler не понимает "." в селекторе классов.

Вот конкретная ошибка:

$ npm run watch

> react-no-webpack@1.0.0 watch C:\...path-to-project-folder...\react-no-webpack
> watchify ./src/index.js -o ./build/bundle.js -t babelify -v


C:\...path-to-project-folder...\react-no-webpack\src\lib\components\WidgetCSS\WidgetCSS.css:1
.widget {
^
ParseError: Unexpected token

Редактировать / Обновить:

Я провел еще какое-то расследование и задал вопрос в репозитории response-css-modules = https://github.com/gajus/react-css-modules/issues/268

Answer 1

ParseError: Unexpected token значит, ваш вавилон не понимает синтаксис CSS

react-css-modules модуль нужен транспортер css вроде webpack Читайте для более подробной информации.

Для вашего случая вы можете использовать css-modulesify,

1) Установите css modulesify

$ npm install --save css-modulesify

2) Обновите свой пакет json script

"build": "browserify ./src/index.js -p [ css-modulesify -o ./build/main.css ] -o ./build/bundle.js -t babelify",
"watch": "watchify ./src/index.js -p [ css-modulesify -o ./build/main.css ] -o ./build/bundle.js -t babelify -v"

не забудьте включить ./build/main.css в index.html для css.

Answer 2

Спасибо @hendrathings - вы правы.

Должно быть, я неправильно прочитал документы или прочитал о настройке, не связанной с веб-пакетом, где-то еще. Я недавно прочитал так много статей, что, вероятно, запутался!

Я последовал вашему предложению - сейчас я использую css-modulesify.

У меня есть рабочий пример библиотеки POC UI с минимальной конфигурацией модулей React + CSS, с синтаксисом CSS и Sass (с использованием пары примеров плагинов PostCSS). Это можно найти в моем обновленном https://github.com/basher/react-no-webpack репо.