一个关于 CSS Modules 的陷阱

灰色人生qwer

于 2024-11-24 20:51:10 发布

阅读量557

点赞数 5

文章标签： css 前端 webpack less CSS Modules

本文链接：https://blog.youkuaiyun.com/z284747/article/details/144012954

版权

我在引用 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 CSS
  a 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 文件

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