[英]Unable to import CSS with “babel-plugin-react-css-modules” - get “ParseError: Unexpected token”
Please see https://github.com/gajus/babel-plugin-react-css-modules/issues/162 for full description of issue. 有关问题的完整描述,请参阅https://github.com/gajus/babel-plugin-react-css-modules/issues/162 。
Git repo = https://github.com/basher/react-no-webpack Git repo = https://github.com/basher/react-no-webpack
This is a simple POC / scaffold for a React UI lib without Webpack or Gulp but it must support CSS Modules + Sass . 这是一个简单的POC / scaffold,用于没有Webpack或Gulp的React UI lib ,但它必须支持CSS Modules + Sass 。
I have a sample widget component that imports a CSS file, and another that imports a Sass file. 我有一个导入CSS文件的示例窗口小部件组件,另一个导入Sass文件的窗口小部件组件。 The error happens when parsing the content of both CSS + Sass files - eg transpiler does not understand "."
解析CSS + Sass文件的内容时会发生错误 - 例如,转换程序不理解“。” in the class selector.
在类选择器中。
Here's the specific error: 这是具体的错误:
$ 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
Edit / Update: 编辑/更新:
I've done some more investigation, and have asked a question in react-css-modules repo too = https://github.com/gajus/react-css-modules/issues/268 我做了一些调查,并在react-css-modules repo中提出了一个问题= https://github.com/gajus/react-css-modules/issues/268
Thanks @hendrathings - you are correct. 谢谢@hendrathings - 你是对的。
I must have misread the docs, or read about a non-webpack setup somewhere else. 我一定是误读了文档,或者读到其他地方的非webpack设置。 I've read so many articles recently that I have probably confused myself!
我最近读了这么多文章,我可能很困惑自己!
I have followed your suggestion - I'm now using css-modulesify . 我已经按照你的建议 - 我现在正在使用css-modulesify 。
I have a working example POC UI lib with minimal React + CSS Modules config, with both CSS and Sass syntax (using a couple of example PostCSS plugins). 我有一个工作示例POC UI lib,具有最小的React + CSS模块配置,具有CSS和Sass语法(使用几个示例PostCSS插件)。 This can be found in my updated https://github.com/basher/react-no-webpack repo.
这可以在我更新的https://github.com/basher/react-no-webpack repo中找到。
ParseError: Unexpected token
mean your babel not understand css syntax ParseError: Unexpected token
意味着你的babel不理解css语法
react-css-modules
module need transpiler css like webpack
, read for more detail . react-css-modules
模块需要像webpack
一样的webpack
css,阅读更多细节 。
For your case you can use css-modulesify
. 对于您的情况,您可以使用
css-modulesify
。
1) Install css modulesify 1)安装css modulesify
$ npm install --save css-modulesify
2) Update your package json script 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"
remember to include ./build/main.css
to index.html
for css. 记得将
./build/main.css
包含在index.html
for css中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.