create-react-app使用less最详细说明 2019-04-13

描述

创建步骤和官网一直，大家可以查看官网，下面简单列举下.

创建项目

npx create-react-app my-app

cd my-app/

eject出配置文件

npm run eject
或者
yarn eject

安装less

less和less-loader都要安装。less是支持less语法的，less-loader是webpack使用来编译less的。

npm install less less-loader --save

配置webpack.config.js

修改config/webpack.config.js

新增less配置变量

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;
const lessRegex = /\.less$/;  // 新增less配置
const lessModuleRegex = /\.module\.less$/; // 新增less配置，这个其实不配置也行

增加module下面rule规则，可以copy cssRegex或者sassRegex的配置。

{
    test: sassModuleRegex,
    use: getStyleLoaders({
            importLoaders: 2,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent
        },
        "sass-loader"
    )
}, 
{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders({
            importLoaders: 1,// 值是1
            modules: true, // 增加这个可以通过模块方式来访问css
            sourceMap: isEnvProduction && shouldUseSourceMap
        },
        "less-loader"
    ),
    sideEffects: true
}, 
// 这个测试删了也不影响
{
    test: lessModuleRegex,
    use: getStyleLoaders({
            importLoaders: 1,
            sourceMap: isEnvProduction && shouldUseSourceMap,
            modules: true,
            getLocalIdent: getCSSModuleLocalIdent
        },
        "less-loader"
    )
},
// "file" loader makes sure those assets get served by WebpackDevServer.

需要注意一下几个地方：

1.lessRegex中importLoaders的值为1

当然这个是2也能使用，但是它的值是根据lessRegex变量后面正则中匹配的loader数来决定的，比如const cssRegex = /\.css$/只是处理css一种类型的文件，那应该就是1；const sassRegex = /\.(scss|sass)$/;对应的是scss和sass两种类型，那就应该是2.

2.lessRegex的use中增加modules配置

modules可以不设置，不设置的话，less只能通过字符串名的方式使用，比如定义了一个.title,引用时import './index.less'，使用时：<div className="title"></div>

如果需要通过模块的方式调用，则需要把modules设置成true，就可以通过styles.title方式使用了。import styles from './index.less',使用<div className={styles.title}></div>

第二种配置方式

可以不增加新的变量，把css的配置包含less

const cssRegex = /\.(css|less)$/; //增加less
const cssModuleRegex = /\.module\.(css|less)$/;

{
    test: cssRegex,
    exclude: cssModuleRegex,
    use: getStyleLoaders({
            importLoaders: 2,// 改成2
            modules: true,//使用模块方式访问样式
            sourceMap: isEnvProduction && shouldUseSourceMap
        },
        "less-loader" //增加loader
    ),
    // Don't consider CSS imports dead code even if the
    // containing package claims to have no side effects.
    // Remove this when webpack adds a warning or an error for this.
    // See https://github.com/webpack/webpack/issues/6571
    sideEffects: true
}

全文完！！！