您的位置:首页 > Web前端 > React

React create-react-app css-moudle webpack4

2019-01-08 19:40 26 查看

求助帖啊······//已有答案

create-react-app一键生成项目

css样式冲突

想webpack.config,js 配置css-moudle的 webpack版本4

但不管怎么配,还是有问题

求大佬解答


地址:https://github.com/css-modules/css-modules

以上是昨天的,本是求助,没人解决。还是自给自足吧

安装 react-app

npm install -g create-react-app

create-react-app myapp

cd myapp

npm start

第二天,爬起来重新试了下,可以了。样式什么的不要在意





我在Home.js和App.js中都写入了样式classname=“dd”,但是我只在导入Home.js样式表test.css定义了.dd样式,而App.js中index.css没有。但是却也有样式。即css没有模块化,导致样式冲突,vue有自带的scope。

import a from "./index.css"
console.log(a) //空 导入模块对js/jsx有效,css没有用

需要在webpack.config.js rules配置
一开始是没有config文件的需要命令行

npm run eject


打开webpack.config.js修改
改为

只要改这两行就行了


用过Vue的应该,不,肯定见过哦
import x form xxx.css 导入的是一个对象了。好像只识别class, tagName不要用,有全局污染

当然这种标识不具有语义性,你可以改成如下,具有语义性,多加了最后一行代码

options: {
importLoaders:1,
modules:true,
localIdentName: '[path][name]__[local]--[hash:base64:5]'
},

因为配置了postcss,所以导入样式的时候写法改变

那就这样了

实际开发中,可能用到UI框架,样式导入,可以在index.html全局引用

如果不错,记得动一下你的小手哦。有问题,也欢迎交流

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: