Question

有关问题的完整说明，请参阅https://github.com/gajus/babel-plugin-react-css-modules/issues/162。

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

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

我只是想尝试使用Babel + Browserify。

直接从“package.json”执行NPM脚本。

我有一个导入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

修改/更新

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

Answer 1

谢谢@hendrathings - 你是对的。

我一定是误读了文档，或者读到其他地方的非webpack设置。我最近读了这么多文章，我可能很困惑自己！

我已按照您的建议 - 我现在正在使用 css-modulesify 。

我有一个工作示例POC UI lib，具有最小的React + CSS模块配置，同时具有CSS和Sass语法（使用几个示例PostCSS插件）。这可以在我更新的https://github.com/basher/react-no-webpack回购邮件中找到。

Answer 2

ParseError: Unexpected token表示你的babel不理解css语法

react-css-modules模块需要像webpack这样的转发器css，读取more detail。

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

1）安装css modulesify

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

请记住将./build/main.css包含在index.html中以获取css。

无法使用“babel-plugin-react-css-modules”导入CSS - 获取“ParseError：Unexpected token”

2 个答案: