[JavaScript知识库] 2021.12.05 每天进步一点点：在react里配置less-loader和css-modules

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 2021.12.05 每天进步一点点：在react里配置less-loader和css-modules -> 正文阅读

[JavaScript知识库]2021.12.05 每天进步一点点：在react里配置less-loader和css-modules

less-loader, css-modules配置

配置结果分享

配置好的文件和测试案例，都已经上传到gitee ，仓库地址：

https://gitee.com/guozia007/css-modules-lessloader

如以下配置过程有不明确的地方，可以查看该分享内容。

准备工作

默认已经安装了react最新版脚手架

暴露webpack配置

react的webpack配置是默认隐藏的，封装在react脚手架包里。

要想加入自己的配置，需要暴露出webpack文件。

npm run eject

会显示出默认的配置文件：

在这里插入图片描述

里面有个webpack.config.js文件，就是我们要写自己的配置的地方。

版本说明

React: ^17.0.2

webpack: 4.44.2

如果版本不同，可能会出现配置方法不一致的情况。

如果暴露出的webpack文件有两个，分别是webpack.config.dev.js和webpack.config.prod.js，这是老的脚手架版本，你大概需要这么配置css-modules：

https://blog.csdn.net/tuzi007a/article/details/121617342?spm=1001.2014.3001.5501

配置less-loader

安装less和less-loader

npm install less --save

npm install less-loader@5.0.0 --save

注：

less-loader不选择版本时，默认安装10.x版本。

而该版本不支持lessOptions的方法，会出现报错：

./src/index.less (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oss) TypeError: this.getOptions is not a function

所以安装less-loader时，应选择合适的版本。

本人测试了10.0.0-6.0.0都不支持。测试了5.0.0版本，是支持的。

配置方法

以下内容均在webpack.config.js文件中操作，

所以以下提到的内容，都去该文件中找到和修改。

1，配置less规则和模块规则

找到如下语句：

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;

复制后放在这个语句后面，

并把css换成less：

在这里插入图片描述

即 less语句如下，可直接复制后添加进去：

const lessRegex = /\.less$/;
const lessModuleRegex = /\.module\.less$/;

2，配置less可选项

找到如下语句：

 const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [...

在cssOptions后添加 lessOptions

该语句就变成了这样：

 const getStyleLoaders = (cssOptions, lessOptions, preProcessor) => {
    const loaders = [...

同时，紧挨着下面找到语句：

{
   loader: require.resolve('css-loader'),
   options: cssOptions,
},

并把下面这一句，添加到上一句的下面。

{
   loader: require.resolve('less-loader'),
   options: lessOptions,
},

结果如下：

在这里插入图片描述

3，配置扩展方法

找到这一段代码：

{
    test: sassRegex,
    exclude: sassModuleRegex,
    use: getStyleLoaders(
    {
        importLoaders: 3,
        sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
    },
    'sass-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,
},
// Adds support for CSS Modules, but using SASS
// using the extension .module.scss or .module.sass
{
    test: sassModuleRegex,
    use: getStyleLoaders(
    {
        importLoaders: 3,
        sourceMap: isEnvProduction
        ? shouldUseSourceMap
        : isEnvDevelopment,
        modules: {
        getLocalIdent: getCSSModuleLocalIdent,
        },
    },
    'sass-loader'
    ),
},

复制上面代码，把sass改成less，然后把修改好的代码添加到该代码下面，

修改后的代码如下：

{
    test: lessRegex,
    exclude: lessModuleRegex,
    use: getStyleLoaders(
        {
        importLoaders: 3,
        sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
        },
        'less-loader'
    ),
    sideEffects: true,
    },
    {
    test: lessModuleRegex,
    use: getStyleLoaders(
        {
        importLoaders: 3,
        sourceMap: isEnvProduction
            ? shouldUseSourceMap
            : isEnvDevelopment,
        modules: {
            getLocalIdent: getCSSModuleLocalIdent,
        },
        },
        'less-loader'
    ),
},

到此，less , less-loader配置完成。配置完成后，需要重启项目。

案例测试

写个带有less语法的例子，测验一下，less配置是否可以用。

/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.less';

function App() {
    return (
        <div>
            <h3 className="color1">hello react!</h3>
        </div>
    )
}

ReactDOM.render(
    <div>
        <App />
    </div>,
    document.querySelector('#root')
)

/src/index.less

@def: pink;

.color1 {
    color: @def;
}

重启项目，npm start

页面内字体颜色显示粉红色，则说明配置正常。

在这里插入图片描述

最简单的模块化

最简单的方法，就是啥配置项都不改动的方法。这是脚手架2.0版默认支持的，不需要任何配置，所以也不需要暴露webpack文件。

只需要改动css/less文件的文件名，即可实现样式的模块化。

原因是，react的默认配置里，已经打开了模块化设置，只不过是对文件名有要求，需要把文件名写作xx.module.css 或者 xx.module.less的形式。

写个案例测试一下，还用上面写过的例子。然后我们做如下改动：

1，改样式文件名： index.less --> index.module.less
2，改动引入方式：import './index.module.less'; --> import styles from './index.module.less';
3，改动标签内类名写法：<h3 className="color1">hello react!</h3> --> <h3 className={styles.color1}>hello react!</h3>

此时，重启项目。 npm start

可以查看到，页面的字体依然为粉红色。

在这里插入图片描述

而且，重点是：

在这里插入图片描述

打开控制台，可以看到，这里的类名变了。变成了一种文件名_类名__hash值（截取前5位）的格式。

也就是说，这时，已经实现了样式的模块化。

但是，为了习惯上的样式文件名，怎么做既能不改动样式文件名，又能实现样式模块化呢？这时，我们就想到了上面的auto选项的值。

配置css-loader实现css-modules

css-modules不是单独的库，也不是插件，而是css-loader中的一个可选项，激活该可选项，即可实现样式的模块化，且无需改动原有的文件名。

既然需要自己配置，我们就需要自己打开该功能。

找到这几项代码，css less sass分别有一项，应该是一共有3项这种代码：

test: --ssRegex,
exclude: --ssModuleRegex,
use: getStyleLoaders({
importLoaders: --,
sourceMap: isEnvProduction
    ? shouldUseSourceMap
    : isEnvDevelopment,
}),

把这里都做如下修改：

test: --ssRegex,
exclude: --ssModuleRegex,
use: getStyleLoaders({
importLoaders: --,
modules: true, // 都加上这一句代码
sourceMap: isEnvProduction
    ? shouldUseSourceMap
    : isEnvDevelopment,
}),

modules: true,意思是打开css-modules功能。不需要把文件命名为.modules.xx的形式了。

当然，为了类名更符合规则，我们还需要做其他更改，把上面的代码改成如下形式：

test: cssRegex,
exclude: cssModuleRegex,
use: getStyleLoaders({
importLoaders: 1,
modules: {
    mode: "local",
    localIdentName: "[path][name]__[local]--[hash:base64:5]",
},
sourceMap: isEnvProduction
    ? shouldUseSourceMap
    : isEnvDevelopment,
}),

localIdentName这里表示编译后的类名规则。

path: 文件路径

name: 文件名

local: 类名

hash:base64:5 表示取base64字符串的前五位

写个案例测试一下吧：

我们仍然用上述案例，

只不过这次把文件名中的module去掉，

index.module.less --> index.less

修改后，重启项目：

在这里插入图片描述
可以看到，页面字体颜色呈现粉红色。

打开控制台，还可以看到新的类名：

在这里插入图片描述
至此，我们的css-modules配置，也已经完成。

其他参数配置

以上配置满足了基本的css-modules使用。如果需要其他配置，可以参考官方资料的案例：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        loader: "css-loader",
        options: {
          modules: {
            mode: "local",
            auto: true,
            exportGlobals: true,
            localIdentName: "[path][name]__[local]--[hash:base64:5]",
            localIdentContext: path.resolve(__dirname, "src"),
            localIdentHashSalt: "my-custom-hash",
            namedExport: true,
            exportLocalsConvention: "camelCase",
            exportOnlyLocals: false,
          },
        },
      },
    ],
  },
};