Please see https://github.com/gajus/babel-plugin-react-css-modules/issues/162 for full description of issue.
Git repo = https://github.com/basher/react-no-webpack
This is a simple POC / scaffold for a React UI lib without Webpack or Gulp but it must support CSS Modules + Sass.
I have a sample widget component that imports a CSS file, and another that imports a Sass file. The error happens when parsing the content of both CSS + Sass files - e.g. transpiler does not understand "." in the class selector.
Here's the specific error:
$ 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
Edit / Update:
I've done some more investigation, and have asked a question in react-css-modules repo too = https://github.com/gajus/react-css-modules/issues/268
ParseError: Unexpected token
mean your babel not understand css syntax
react-css-modules
module need transpiler css like webpack
, read for more detail.
For your case you can use css-modulesify
.
1) Install css modulesify
$ npm install --save css-modulesify
2) Update your package 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"
remember to include ./build/main.css
to index.html
for css.