# CSS模块化 >A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. CSS模块就是所有的类名都只有局部作用域的CSS文件。 css-loader [https://www.npmjs.com/package/css-loader](https://www.npmjs.com/package/css-loader) ## Options | Name | Type | Default | Description | | --- | --- | --- | --- | | **[`url`](https://www.npmjs.com/package/css-loader#url)** | `{Boolean\|Function}` | `true` | Enable/Disable`url()`handling | | **[`import`](https://www.npmjs.com/package/css-loader#import)** | `{Boolean\|Function}` | `true` | Enable/Disable @import handling | | **[`modules`](https://www.npmjs.com/package/css-loader#modules)** | `{Boolean\|String\|Object}` | `false` | Enable/Disable CSS Modules and setup their options | | **[`sourceMap`](https://www.npmjs.com/package/css-loader#sourcemap)** | `{Boolean}` | `false` | Enable/Disable Sourcemaps | | **[`importLoaders`](https://www.npmjs.com/package/css-loader#importloaders)** | `{Number}` | `0` | Number of loaders applied before CSS loader | | **[`localsConvention`](https://www.npmjs.com/package/css-loader#localsconvention)** | `{String}` | `asIs` | Setup style of exported classnames | | **[`onlyLocals`](https://www.npmjs.com/package/css-loader#onlylocals)** | `{Boolean}` | `false` | Export only locals | ## 修改配置参数 在这个配置参数 中我们可以发现有一个modules它其实就是将样式模块化。我们可以修改`webpack.config.js` ~~~ {test:/\.css$/,use:['style-loader',{loader:'css-loader', options: {modules:true}}]}, ~~~ 效果如下：  ## 使用样式 我们发现默认不会有任何的样式，说明模块化样式已经生效了，那么，我们的样式又该如何应用呢？ 我们修改commet.js组件。 ~~~ import style from './commet.css' console.log(style) ~~~ 查看打印的结果 ``` {title: "qdjH7MkTnUkcOOte2sc2r"} ``` 应用样式 ~~~ <div className={style.title}>评论组件标题</div> ~~~  至些模块化应用的基础已经完成。这样已经实现了模块化样式。 ## 总结 1.通过上面我们了解了CSS模块化，CSS模块就是所有的类名都只有局部作用域的CSS文件。 2.想要实现CSS模块化那么必须修改`webpack.config.js`的`css-loader`。添加配置参数 `options: {modules:true}` 3.应用模块化，`import style from './commet.css'` 4.给标签添加类名 `className={style.className}` ## 思考 那么通过上面我们也已经了解了CSS模块化的概念和使用，那么接下来就是多写多练。但是，我们了解了问题，相应的问题也来了，怎么维护样式呢？ 我们发现它的**类名是一串随机字符串**如果我们样式书写的有问题，如何快速定位到这个样式？两种办法 1.可以配置[`sourceMap`](https://www.npmjs.com/package/css-loader#sourcemap) 2.随机字符串规则化。[localIdentName] ([https://www.npmjs.com/package/css-loader#localidentname](https://www.npmjs.com/package/css-loader#localidentname)) 上面两种办法都可以，也可以结合在一起使用。工作中按照多年的工作经验 我会选择第二种多一些。 **css-loader@2.x配置** ~~~ {test:/\.css$/,use:['style-loader',{loader:'css-loader', options: {modules:true,sourceMap:true,localIdentName:'[name]__[local]--[hash:5]'}}]}, ~~~ **css-loader@3.x配置** {test:/\.css$/,use:['style-loader',{loader:'css-loader', options: {modules:{localIdentName:'[name]__[local]--[hash:5]'},sourceMap:true,}}]}, name表示是css文件名称，local表示是原本的类名，后面紧跟的是hash根据文件生成的随机字符串。 效果如下