babel-plugin-auto-css-module

自动为使用 import ss from './index.css'这样引入方式的 css 文件添加特定后缀 方便 css 模块化 不需要在创建文件时添加后缀，例如 index.module.css

安装

pnpm add babel-plugin-auto-css-module -D
# or
yarn add babel-plugin-auto-css-module -D
# or
npm install babel-plugin-auto-css-module -D

参数

参数名	类型	默认值	说明
cssSuffix	string[]	['.css', '.less', '.scss', '.sass']	需要添加后缀的 css 文件后缀名
fileSuffix	string	'css_modules'	添加后缀的文件名后缀

使用

// .babelrc or babel-loader option
{
  "plugins": [
    [
      "babel-plugin-auto-css-module",
      {
        "cssSuffix": ['.css', '.scss']
        "fileSuffix": "css_modules"
      }
    ]
  ]
}

// webpack.config.js
module.export = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.scss/,
        oneOf: [
          {
            // your fileSuffix
            // default css_modules
            resourceQuery: /css_modules/
            use: [
              ...
              {
                loader: 'css-loader',
                options: {
                  modules: {
                    localIdentName: '[name]__[local]-[hash:base64:5]',
                  }
                }
              }
            ]
          },
          {
            use: [..., 'css-loader']
          }
        ]
      }
    ]
  }
}