[JavaScript知识库] create react app 后配置并启用scss

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> create react app 后配置并启用scss_module带原来的class名 -> 正文阅读

[JavaScript知识库]create react app 后配置并启用scss_module带原来的class名

使用create react app 创建项目后，
使用以下文件引入sass文件中的className名不生效

在这里插入图片描述

我们发现页面中根本没有引用成功scss文件中的文件名

在这里插入图片描述

把creat react app默认sass module 配置项改为true,我们发现文件名生效了，但是class名全部变成了在全局可区分的hash值，根本分辨不出当前class名具体是哪个元素
在这里插入图片描述
因为css-loader默认的哈希算法是[hash:base64]，这会将.title编译成._3zyde4l1yATCOkgn-DBWEL这样的字符串。

webpack.config.js里面可以定制哈希字符串的格式。

我们之前这样配置css-loader的

module: {
  loaders: [
    // ...
    {
      test: /\.css$/,
      loader: "style-loader!css-loader?modules&localIdentName=[path][name]---[local]---[hash:base64:5]"
    },
  ]
}

现在我们改成使用对象配置css-loader，同样的把modules配置放到mode里就好

//  启用 css modules, css模块化, 所有类名都默认为当前组件,或者使用 :global 声明全局样式, 参考 AntDesignPro 的样式引用
modules: {
	// mode: 'icss',
    // modules: true,
    localIdentName: '[name]__[local]--[hash:base64:5]',  // 配置name为当前组件名，之后CLASS名为【当前组件名+原本class名+hash值】
    localIdentName: '[local]--[hash:base64:5]',  // CLASS名为【当前组件名+原本class名+hash值】
    exportGlobals: true, // 注意！:global 声明全局样式需要该属性
},