无法使用"babel-plugin-react-css-modules"导入CSS - 获取"ParseError:Unexpected token"

Question

有关问题的完整描述,请参阅https://github.com/gajus/babel-plugin-react-css-modules/issues/162.

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

这是一个简单的POC/scaffold,用于没有Webpack或Gulp的React UI lib ,但它必须支持CSS Modules + Sass.

• 我只是想尝试使用Babel + Browserify.
• 并直接从"package.json"执行NPM脚本.

我有一个导入CSS文件的示例窗口小部件组件,另一个导入Sass文件的窗口小部件组件.解析CSS + Sass文件的内容时会发生错误 - 例如,转换程序不理解"." 在类选择器中.

这是具体的错误:

$ 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

编辑/更新:

我做了一些调查,并在react-css-modules repo中问了一个问题= https://github.com/gajus/react-css-modules/issues/268

Answer 1

ParseError: Unexpected token意味着你的 babel 不理解 css 语法

react-css-modules模块需要像转换器一样的 CSS webpack，请阅读更多详细信息。

对于您的情况，您可以使用css-modulesify.

1）安装css模块

$ npm install --save css-modulesify

2) 更新你的包json脚本

"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"

记得在 css 中包含./build/main.cssto index.html。