注册账号登录
小k
...
关注

解决模块化css和全局css的问题

下载依赖包:

yarn add babel-plugin-react-css-modules -D

然后在babel.config.js的plugin属性里添加下面代码

[
'react-css-modules',
{
generateScopedName: '[name]-[hash:base64:8]',
filetypes: {
'.less': {
syntax: 'postcss-less',
},
},
},
],

这样就可以解析less的模块化css样式了

在jsx语法中就可以这样用模块中的css样式名

import "./style.less";

const App = ()=>{
return <div styleName="main" className="main"></div>
}

styleName就是模块化的css文件名称

className是未被模块化的css文件名称

解决了模块和全局css的应用问题

2条评论

不错

回复

很好

回复
小k
关注私信
2
关注
2
粉丝
10
帖子