React支持class类名及css模块化

admin 发布于 REACT

1、React支持class类名的写法

(1)插件安装

npm install babel-plugin-react-html-attrs -S

(2)webpack中配置,可以利用npm run eject暴露webpack备注内容或者在node_modules/react-scripts/config/webpack.config.js中修改【属于:test: /\.(js|mjs|jsx|ts|tsx)$/模块下】

2、Css模块化,为了解决命名冲突和全局污染的问题

(1)默认webpack是配置了模块化

(2)配置生成的类名,默认下是webpack提供的类名,为了方便项目对比可以自己配置对应类名规则

(3)自定义模块化方式,默认css模块化需要在对应css中添加model名称,但是事件开发中可能会用到第三方库,为了防止问题可以单独对某个文件夹下方的设置是否进行模块化处理【替换原有cssRegex】

 {
              test: cssRegex,
              exclude:[//3、排除文件夹下面的css文件,利用下一条cssRegex规则
                path.resolve(__dirname, 'node_modules'),
                path.resolve(__dirname,'src/css'),
              ],
              use: getStyleLoaders({
                importLoaders: 1,
                modules:{
                  localIdentName: '[local]_[hash:base64:6]'
                },
                sourceMap: isEnvProduction && shouldUseSourceMap,
              }),

              sideEffects: true,
            },
            {
              test:cssRegex,
              use:['style-loader','css-loader'],
              include:[//4、样式只应用到文件夹下面的css文件中
                path.resolve(__dirname, 'node_modules'),
                path.resolve(__dirname,'src/css'),
              ]
            }


220浏览量 · 0评论 · 2020-05-05 11:57:39

全部评论  0

注册登录 进行评论

热门专题

更多专题