create-react-app 配置less css-module

  1. npm run eject 暴露wepack.config.js配置
  2. npm i less less-loader --save 下载lessless-loader
  3. 仿照create-react-app配置sass代码配置less.
const lessRegex = /\.less$/
const lessModuleRegex = /\.module\.less$/

oneOf:[
...,
            {
              test: lessRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                },
                'less-loader'
              )
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: true,
                  getLocalIdent: getCSSModuleLocalIdent
                },
                'less-loader'
              ),
              sideEffects: true
            },Ï
]
  1. 使用css-module的less文件加上.module,如 index.module.less
  2. 使用时注意
import styles from './index.module.less'

样式名不能加中线

你可能感兴趣的:(create-react-app 配置less css-module)