react學習筆記二：css module

使用create-react-app建立react工程

這裏使用的是less，sass的配置也是差很少，修改相應依賴、webpack配置test規則、loader便可

生成config文件夾

npm run eject
複製代碼

安裝依賴：

npm i -D style-loader css-loader less less-loader
複製代碼

webpack配置

• const lessRegex = /\.less$/;
• localIdentName：配置生成的css類名組成（path路徑，name文件名，local原來的css類名, hash: base64:5拼接生成hash值5位，具體位數可根據須要設置
• 以下的配置（localIdentName: '[local]__[hash:base64:5]'）：生成的css類名相似 class="edit__275ih"這種，既能達到scoped的效果，又保留原來的css類名(edit)

// config/webpack.config.js
...
module:
    ...
    rules:
        ...
        {
          test: lessRegex,
          exclude: [/node_modules/],
          use: [
            require.resolve('style-loader'),
            {
              loader: require.resolve('css-loader'),
              options: {
                importLoaders: 1,
                modules: true,
                // localIdentName: '[path][name]__[local]__[hash:base64:5]'
                localIdentName: '[local]__[hash:base64:5]'
              }
            },
            {
              loader: require.resolve('less-loader') // compiles less to css
            }
          ]
        },
        ...
複製代碼

組件中使用：