安装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文件抛出去的名称