# 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根據文件生成的隨機字符串。 效果如下