探索创新：开启无限可能的创造之旅

本篇文章给大家谈谈探索创新：开启无限可能的创造之旅，以及对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

//使用CSS模块

从"./index.less" 导入样式；

//不使用

导入"./index.less";这种写法非常方便。然而，css-loader 本身并不支持这个功能，因为加载器不知道这个文件是如何被引用的。因此，在create-react-app中，需要在样式文件名中添加.module来标识CSS Modules的使用。例如：

//使用CSS模块

从"./index.module.less" 导入样式；

//不使用

从"./index.less" 导入样式；

导入"./index.less";这种方式对文件名的限制比较强，所以Umi 对这种情况进行了优化。

如何使用

首先，你需要使用craco来使create-react-app的webpack可配置。

craco 的功能与react-app-rewired 类似，但比其配置更加用户友好。 craco提取常用的配置作为配置项，而react-app-rewired只能通过转换功能修改webpack配置，并且往往需要与customize-cra配合使用。

安装craco 和插件craco-css-modules

$ npm install @craco/craco craco-css-modules -D 创建构建文件夹并创建包含以下内容的craco.config.js 文件：

const CracoCSSModules=require("craco-css-modules");

模块. 导出={

插件： [

{ 插件： CracoCSSModules },

]

};修改package.json中的npm脚本

"脚本": {

- "开始": "反应脚本开始"，

+ "开始": "克拉科开始",

- "build": "反应脚本构建"，

+ "build": "craco 构建"

在package.json中添加cracoConfig字段并将其指向配置文件

"cracoConfig": "./build/craco.config.js" 这里也可以选择使用craco支持的约定在项目根目录下创建craco.config.js或.cracorc.js。就我个人而言，我不喜欢根目录中有很多文件。

大功告成，您不再需要编写特殊名称.module.css。

已在以下版本上验证：

react-scripts:^5.0.0@craco/craco:^6.4.0craco-css-modules:^1.0.1

Less 支持

create-react-app本身不支持less，但是可以通过craco-less来支持。

安装craco-less插件

$ npm install craco-less -D 在craco.config.js 中使用插件：

const CracoLess=require("craco-less");

const CracoCSSModules=require("craco-css-modules");

模块. 导出={

插件： [

{plugin: CracoLess}，

{ 插件： CracoCSSModules },

};您可以使用less 语法

已在以下版本上验证：

craco-less: ^2.0.0

原理

通过打印Webpack配置，可以看到create-react-app对css文件生成了如下解析配置（类似于less和sass）：

模块： {

规则： [

{

test: //.css$/,

使用： [

{

loader: "css-loader",

模块：假，

{

test: /.module.css$/,

使用： [

{

loader: "css-loader",

模块： {

localIdentName: "",

因此create-react-app通过判断文件名中的.module来区分css-loader是否打开模块。那么如何在不传递文件名的情况下做到这一点呢？我们可以使用resourceQuery给需要打开的文件添加查询参数来区分。

模块： {

规则： [

{

test: //.css$/,

oneOf: [

{

resourceQuery: /模块/,

使用： [

{

loader: "css-loader",

模块： {

localIdentName: "",

{

使用： [

{

loader: "css-loader",

模块：假，

}如何让这些less文件有这个查询？我们可以使用babel 来实现这一点，通过修改AST（抽象语法树）将import.from 语法中引用的less 文件拼接到？modulesquery 中。

const CSS_EXT_NAMES=[".css", ".less", ".sass", ".scss"];

函数变换（）{

返回{

访客： {

ImportDeclaration(路径， { opts }) {

常量{

说明符，

来源，

源： {值}，

}=路径.节点；

if (specifiers.length CSS_EXT_NAMES.includes(extname(value))) {

source.value=`${value}?${opts.flag || "模块"}`;

}

};

}以上实现来自@umijs/babel-plugin-auto-css-modules。为了支持esbuild，craco-css-modules没有选择使用babel，而是通过Webpack插件AutoCSSModulesWebpackPlugin来实现。原理是一样的。

经过上述转换后，使用CSS Modules 的less 文件末尾会多一个查询，该查询将由Webpack 使用启用模块的css-loader 进行处理。

总结一下原理，重点是：

配置Webpack的modules.resolve，通过oneOf+resourceQuery为样式文件启用CSS模块，并通过Babel使用import.from语法将querycraco-css-modules添加到less文件中。这也是基于上述原理，通过craco的插件机制来实现的。对Webpack的配置进行上述修改。源代码：https://github.com/crazyurus/craco-css-modules