6

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

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

这是一个简单的 POC / 脚手架，用于没有 Webpack 或 Gulp的 React UI 库，但它必须支持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

4

2 回答 2

1

谢谢@hendrathings - 你是对的。

我一定是误读了文档，或者在其他地方阅读了有关非 webpack 设置的信息。最近看了很多文章，我可能自己都糊涂了！

我已听从您的建议 - 我现在正在使用css-modulesify。

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

于 2018-03-12T22:31:43.500 回答
1

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

react-css-modules模块需要转译器 css 之类webpack的，请阅读以获取更多详细信息。

对于您的情况，您可以使用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.htmlcss 中。

于 2018-03-10T15:27:19.063 回答