无法导入带有“babel-plugin CSS -模块”-获取"ParseError:意外令牌“的css

Question

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

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

这是一个简单的POC /脚手架，用于一个没有Webpack或Gulp的反应性UI库，但是它必须支持CSS + 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回购中问了一个问题，也是= https://github.com/gajus/react-css-modules/issues/268。

Answer 1

ParseError: Unexpected token的意思是您的babel不懂css语法

react-css-modules模块需要像webpack那样的转换程序css，为更详细读取。

对于您的情况，您可以使用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.css到index.html。

Answer 2

谢谢@hendrathings你说得对。

我一定是误读了文档，或者在别的地方读到了一个非webpack的装置。最近我读了这么多文章，我可能把自己搞糊涂了！

我已经遵循了你的建议--我现在使用css-modulesify.

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