一个关于 CSS Modules 的陷阱

我在引用 less 文件样式的时候，发现

index.less

.drag_upload {width: 100%;height: 90vh;padding: 20px;
}

index.jsx

import React, { useState, useEffect } from 'react';
import styles from './index.less';export default ({
}) => {return (<div className={styles.drag_upload}>test</div>);
};

经查发现我没有开启模块化，所以使用 styles 变量引入样式没有用：

使用这种全局普通样式就有用

import React, { useState, useEffect } from 'react';
import styles from './index.less';export default ({
}) => {return (<div className="drag_upload">test</div>);
};

但是我全局普通样式容易影响其他组件的样式，所以我需要开启模块化功能，只让当前的 index.less 在引入的文件生效，不影响其他组件样式。

参考 webpack 官网配置开启 CSS Modules 模块化功能：

这样我以为没问题了，结果发现我要写的那块样式确实生效了，styles 变量起作用了，但是我的项目主页的图片显示不出来了。

经查发现是 CSS Modules 与 Less 配合存在问题，如 webpack 官网 提到的 CSS modules 陷阱

github 参考：
https://github.com/webpack-contrib/less-loader/issues/109
https://github.com/webpack-contrib/less-loader/pull/121
https://github.com/wall-wxk/blog/issues/8

主要是这样解决：

npm 网站参考：
https://www.npmjs.com/package/resolve-url-loader

我的项目中是这样配置的：

注意：
include 很重要，最好写上要生效的路径。
就像我下面这段 antd 的样式就不能开启 CSS Modules ， 就算配置了 resolve-url-loader ，样式也会乱掉 或者 和前面一样出问题

**注意：**开启 sourceMap 很重要，不配置 sourceMap 会报如下错误：

Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: resolve-url-loader: error processing CSSa valid source-map is not present (ensure preceding loaders output a source-map)

以及如果 index.less 文件没有写东西，是个空文件夹，也会报如下错误：

resolve-url-loader: webpack misconfiguration
webpack or the upstream loader did not supply a source-map

所以不能写空的 less 文件

到这里问题就完全解决了。