Unable to import CSS with "babel-plugin-react-css-modules" - get "ParseError: Unexpected token"

Question

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

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

这是一个简单的 POC / 脚手架，用于 React UI lib 没有 Webpack 或 Gulp 但它必须支持 CSS 模块 + Sass.

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

我有一个示例小部件组件，它导入一个 CSS 文件，另一个导入一个 Sass 文件。解析 CSS + Sass 文件的内容时会发生错误 - 例如转译器不理解“。”在 class 选择器中。

具体错误如下：

$ 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 too = https://github.com/gajus/react-css-modules/issues/268[=14= 中提出了一个问题]

Answer 1

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"

记得为 css 添加 ./build/main.css 到 index.html。

Answer 2

谢谢@hendrathings - 你是对的。

我一定是看错了文档，或者在其他地方读到了 non-webpack 设置。最近看了那么多文章，估计自己都糊涂了！

我已采纳您的建议 - 我现在正在使用 css-modulesify。

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

Unable to import CSS with "babel-plugin-react-css-modules" - get "ParseError: Unexpected token"

Unable to import CSS with "babel-plugin-react-css-modules" - get "ParseError: Unexpected token"

reactjs

babeljs

css-modules

babelify

babel-plugin-react-css-modules