【React】dva-cli建立脚手架后引用css 无效

前端之家收集整理的这篇文章主要介绍了【React】dva-cli建立脚手架后引用css 无效前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

用dva-cli作为脚手架建立工程后,开始尝试编写页面。然后立马发现一个坑爹的问题。

在我less文件里面写了一个class,比如:MainHead。

但是编译出来之后发现css文件里面变成了MainHead__xuaz,多了一个后缀,坑爹嘛这是!!!

一番查找后发现原来是引用了css-modules这个包。

为了卸载这个包,我翻找了半天。照例来说应该在webpack的时候屏蔽这个包。

可惜node项目不知道说封装了太好了还是怎么的,dva生成的脚手架里面根本就没有webpack.config.js这个包。

终于,在我的不懈努力下终于发现问题的主因了。

原因就在于dva是用一个叫rodhog的工具打包的。

在root目录下,有一个叫.roadhogrc配置文件

打开这个文件,里面有一个【disableCSSModules】的配置项。默认是false,启动css-modules,只要将它改成true,就可以屏蔽css-modules了。



@H_502_30@.roadhogrc 如下

@H_502_30@

@H_502_30@{

@H_502_30@ "entry": "src/index.js",

@H_502_30@ "env": {

@H_502_30@ "development": {

@H_502_30@ "extraBabelPlugins": [

@H_502_30@ "dva-hmr",

@H_502_30@ "transform-runtime"

@H_502_30@ ]

@H_502_30@ },

@H_502_30@ "production": {

@H_502_30@ "extraBabelPlugins": [

@H_502_30@ "transform-runtime"

@H_502_30@ ]

@H_502_30@ }

@H_502_30@ },

@H_502_30@ "extraBabelPlugins": [

@H_502_30@

@H_502_30@ "transform-runtime",

@H_502_30@ ["import",{ "libraryName": "antd","style": "css" }]

@H_502_30@ ]

@H_502_30@,

@H_502_30@ "disableCSSModules":true

@H_502_30@}

猜你在找的React相关文章