在Webpack中配置CSS Modules

2023-10-27

如果你想要将样式局部化到单个组件，并且希望以某种方式“导入”它们作为对象（尽管实际上它们不是对象，而是被转换为具有唯一类名的 CSS），你可以使用 CSS Modules。CSS Modules 允许你编写普通的 CSS（或 Less，如果你配置了相应的 loader），但每个类名都会在构建时被转换为唯一的标识符。
要使用 CSS Modules，你需要确保你的构建系统（如 Webpack）已经配置了相应的 loader，并且你的 .less 文件被当作 CSS Modules 来处理。然后，你可以这样导入它们：

"css-loader": "^2.1.1",
rules: [  
      {  
        test: /\.css$/,  
        exclude: /node_modules/, // 排除node_modules目录  
        use: [  
          'style-loader', // 将CSS注入到DOM中  
          {  
            loader: 'css-loader',  
            options: {  
              modules: true, // 启用CSS Modules  
              localIdentName: '[name]__[local]--[hash:base64:5]', // 生成唯一标识符的格式  
              camelCase: true, // 将类名转换为驼峰命名法  
            }  
          }  
        ]  
      }  
      // 其他规则...  
    ]

最新版本

 rules: [  
      {  
        test: /\.css$/,  
        exclude: /node_modules/,  
        use: [  
          'style-loader',  
          {  
            loader: 'css-loader',  
            options: {  
              modules: {  
                auto: true, // 启用 CSS Modules  
                getLocalIdent: (context, localIdentName, localName, options) => {  
                  // 这里可以自定义生成的类名格式  
                  // 例如，使用 [name]__[local]__[hash:base64:5] 的格式  
                  return `${localName}__${localIdentName.replace(/--/g, '_')}__${options.hashPrefix || ''}${options.contenthash.slice(0, options.hashDigestLength)}`;  
                },  
              },  
              // 如果需要，可以添加其他选项，比如 camelCase: true 来将类名转换为驼峰命名法  
              // 但请注意，camelCase 选项可能不再直接支持，因为类名通常是通过模板字符串或对象属性访问的，不需要转换  
            },  
          },  
        ],  
      },  
      // ... 其他规则 ...  
    ],


WEB开发