lessModuleRegex安装和配置

 

安装less依赖

npm install less less-loader --save-dev

配置步骤：

webpack.config.js

1.

//lessModuleRegex配置第一处
// style files regexes
const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

2.和自动成成的css相关一起

 //lessModuleRegex配置第二处
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                },
                'less-loader'
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 2,
                  sourceMap: isEnvProduction && shouldUseSourceMap,
                  // modules: true,
                  // getLocalIdent: getCSSModuleLocalIdent,
                  modules: {
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                'less-loader'
              )
            },

3.进入getCSSModuleLocalIdent函数

/**
 * Copyright (c) 2015-present, Facebook, Inc.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

'use strict';

const loaderUtils = require('loader-utils');
const path = require('path');

module.exports = function getLocalIdent(
  context,
  localIdentName,
  localName,
  options
) {
  // Use the filename or folder name, based on some uses the index.js / index.module.(css|scss|sass) project style
//增加less
  const fileNameOrFolder = context.resourcePath.match(
    /index\.module\.(css|scss|sass|less)$/
  )
    ? '[folder]'
    : '[name]';
  // Create a hash based on a the file location and class name. Will be unique across a project, and close to globally unique.
//hash 设置为5位
  const hash = loaderUtils.getHashDigest(
    path.posix.relative(context.rootContext, context.resourcePath) + localName,
    'md5',
    'base64',
    5
  );
  // Use loaderUtils to find the file or folder name
// 展示由什么组成 例如：my_text__158hU
  const className = loaderUtils.interpolateName(
    context,
    fileNameOrFolder + '_' + localName + '__' + hash,
    options
  );
  // remove the .module that appears in every classname when based on the file.
  return className.replace('.module_', '_');
};

4.正常引用 import styles from './my.module.less';

但是tsx文件引用会报错，在tsx文件中引用less文件方式，我们会直接用import '***./less',这不能达到我们引用lessModuleRegex的目的，因为下面还需要用到

解决方法：在src增加 .d.ts文件

给出声明

// typed-css.d.ts
// scss模块声明
declare module '*.scss' {
    const content: {[key: string]: any}
    export = content
  }
  // less模块声明
  declare module '*.less' {
    const content: { [key: string]: any }
    export default content
  }

这时候去tsx文件里去引用  import styles from './my.module.less';

 

使用方法：

尝试打印 styles.text  结果：my_text__158hU 

my就是我们新建的module.less文件名，styles是我们引入这个less文件抛出去的名称