css-modules学习

最新推荐文章于 2025-06-24 15:56:38 发布

xiange18

最新推荐文章于 2025-06-24 15:56:38 发布

阅读量241

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习笔记文章标签： css-modules

本文链接：https://blog.youkuaiyun.com/weixin_43664308/article/details/96867216

前端学习笔记专栏收录该内容

24 篇文章

订阅专栏

本文介绍了解决 CSS 样式冲突的方法——使用 CSS Modules 技术。通过生成具有唯一性的 hash 类名来避免不同文件间 CSS 样式的覆盖问题。文章详细展示了如何在 React 项目中配置 webpack 来实现 CSS Modules 的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决问题：css是公共的，不同文件加载的css最终的呈现方式都是在同一个文件中出现，会导致样式覆盖。css-modules的解决思路是：生成hash类名，具有唯一性。

引用方法：通过打包工具引入,如webpack。

以下以react为例：

.babelrc

{
 
	"presets": [
		["env", {
			"targets": {
				"browsers": [	"> 1%","last 2 versions", "safari >= 7","not ie <= 10"]
			},
			"useBuiltIns": true
		}],
		"react",
		"stage-0"
	],
	"plugins": [
		["import", { "libraryName": "antd", "style": true }],
	]
}

package.json

{
  "name": "css-modules",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --watch",
    "debug": "cross-env NODE_ENV=development:test node --inspect-brk node_modules/webpack/bin/webpack.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "7",
    "babel-plugin-import": "^1.12.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "cross-env": "^5.2.0",
    "css-loader": "^3.1.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "style-loader": "^0.23.1",
    "webpack": "^4.36.1",
    "webpack-cli": "^3.3.6"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname,'./'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            // camelCase: 'dashes'
                            // localIdentName: '[path][name]__[local]--[hash:base64:5]' //不可用？？不知道啥情况
                        },
                    }
                ]
            }
        ]
    }
}

css-loader配置--参考：https://www.webpackjs.com/loaders/css-loader/#%E9%80%89%E9%A1%B9

最终效果：