markdown CSS模块概述

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了markdown CSS模块概述相关的知识,希望对你有一定的参考价值。

```js
const extractCSS = new ExtractTextPlugin('assets/[name].[hash].css');

{
    test: /\.css$/,
        use: extractCSS.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1,
                modules: true,
                localIdentName: '[name]__[local]__[hash:base64:5]',
                camelCase: true,
                sourceMap: true
              }
            },
            'postcss-loader'
          ]
        }),
}
```


css-loader parses and converts our css, extracts it, stores it, AND supports css-modules.
The addition of modules:true and localIndentName: `[name]__[local]__[hash:base64:5]` is critical for your styles, and your css classes getting unique names per component so that they don’t override each other globally across the application.

**localIdentName:**

[name]: refers to your css className.

[local]: allows css-loaders to assign it (the className) to a local component. In other words, scope it.

[hash:base64:5]: gives your className a unique hash to make sure you don’t overwrite your styles globally across your application.

**camelCase:** option converts your dashed css class names to camel case

以上是关于markdown CSS模块概述的主要内容,如果未能解决你的问题,请参考以下文章

markdown 12 - CSS模块

markdown 故事书与CSS模块

markdown FlowType和CSS模块

前端学Markdown

前面的话

C301 概述