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'
<div className={styles.xx}></div>

样式名不能加中线

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容