CSSModules初识
时间：2023-03-31 01:10:00
CSS
什么是CSSModules套用CSSModules官网的话，一个css文件代表一个模块，这个css文件中的类名（classnames）和动画名（animationnames）有部分effectbydefaultDomain，简单的说，CSS也有作用域（其实这个不是很准确，只是通过名称转换让CSS看起来有作用域）。给我看代码原始代码/*style.css*/.header{color:red;字体大小：20px；}/*或*/:lcoal(.header){颜色：红色；字体大小：20px；}从'./style.css'导入样式；...render(){returnheader
}转换后Code.style__header___YHKJLJH{color:red;字体大小：20px；}
header 为什么要使用CSSModules我个人认为主要是CSSModules用来提供css局部作用域的能力来使css更可控，避免污染全局样式。以往，在开发过程中，往往只能依赖命名约定。程序员有意识地遵循团队的命名约定，以避免风格污染。当项目越来越大，团队成员越来越多的时候，很难避免风格被污染的情况。这个时候改样式难免有点牵强，所以如果有一种方法（CSSModules）可以让你写的样式和其他样式完全隔离，那该多爽啊。我们先了解一下css-loaderCSSModules中CSSModules相关的配置并不是官方提供的功能，而是在项目编译打包阶段修改类名替换对应的类。本质上，webpack是依靠css-loader来进行打包处理，让CSSModules生效。模块：默认值为false；true表示启用CSSModulessourceMap：默认为false，不启用sourceMap；true是开启sourceMap，在开发环境下比较实用getLocalIdent:默认是undefined，自定义function生成的类名]___[name]__[local]___[hash:base64:5]，可以自定义类名的模板，适当修改即可开始实战。这里我们以reactjs为例，开启CSSModules之旅。这里我们做一个默认的约定，使用.module.css或者module.scss作为文件后缀来区分全局样式和局部样式。首先使用create-react-app创建一个my-app项目，然后运行项目（创建过程需要一些时间，因为这里会安装所有依赖包。)npxcreate-react-appmy-appnpmrunstart演示项目使用的版本信息{"name":"my-app","version":"0.1.0","private":true,"dependencies":{"react":"^16.9.0","react-dom":"^16.9.0","react-scripts":"3.1.1"},"scripts":{"start":"react-脚本开始”，“构建”：“反应脚本构建”，“测试”：“反应脚本测试”，“弹出”：“反应脚本弹出”}，“eslintConfig”：{“扩展”：“反应-app"},"browserslist":{"production":[">0.2%","notdead","notop_miniall"],"development":["last1chromeversion","last1firefoxversion","last1safariversion"]}}无需任何修改，您可以使用CSSModules在my-app/src目录中添加一个style.module.css文件。标题{字体大小：25px；}从“反应”中导入反应；从“./logo.svg”导入标志；导入'./App.css'；从'./style.module.css'导入样式；函数App(){返回(
你好CSS模块 );}导出默认应用；保存后查看浏览器，可以在控制台看到p标签的class="style_title__2t5Z0"，对应的样式类名title也转换成了style_title__2t5Z0。可以看到使用create-react-app，默认已经支持CSSModules。查看webpack配置新版create-react-app创建的项目将打包构建的脚本放在npm包中，所以需要使用npmruneject命令解压相关文件夹。运行成功后，会在项目目录下添加两个文件config、scripts文件夹，我们主要查看config/webpack.config.js，直接在oneOf/*css*/{test:cssModuleRegex中查看这块内容，使用：getStyleLoaders({importLoaders:1,sourceMap:isEnvProduction&&shouldUseSourceMap,modules:true,getLocalIdent:getCSSModuleLocalIdent,}),},/*scss*/{测试:sassModuleRegex,使用:getStyleLoaders({importLoaders:2,sourceMap:isEnvProduction&&shouldUseSourceMap,modules:true,getLocalIdent:getCSSModule,LocalIdent,}sass-loader'),},//cssModuleRegex是正则模式匹配cssModule,/\.module\.css$///getStyleLoaders用于获取对应的loader,我们只需要注意css-loader，css-loader使用的options是getStyleLoaders的第一个参数，modules:true开启css模块，其实css模块是css-loader支持的constgetStyleLoaders=(cssOptions,preProcessor)=>{常量加载器=[...{loader:require.resolve('css-loader'),options:cssOptions,},...returnloaders;可以看到在create-react-app创建的工程中已经开箱即用了CSSModules（Supportcss,scss），只需要修改样式的使用方式（import），使用module.css和module.scss(sass)后缀将CSSModules引入现有项目。将CSSModules引入脚手架也非常简单。你只需要修改css-loader的相关配置即可。sourceMap只在开发环境中打开。显示编码的哈希值。推荐使用module.scss，module.css作为CSSModules文件的后缀，与已有的样式文件区分开来。//开发环境const是否为Develop=true;...{测试：/\.module\.scss$/，使用：['style-loader',{'css-loader',options:{sourceMap:isDevelop,modules:true,localIdentName:dev?'[path]___[name]__[local]___[hash:base64:5]':'[hash:base64]',}}'postcss-loader','sass-loader'}，终极武器babel-plugin-react-css-modules现在已经解决了不再需要:local来标记样式文件中哪些类名需要转换的问题，所以使用起来还是有些问题，CSSModules推荐使用camelCase，什么？向我展示来自'./style.module.css'的代码导入样式；