Hacktoberfest 2026：维护者为十月标记出来的 issue，仍然开放、适合新手。 浏览 Hacktoberfest issue

Missing [path] in module.less files [webpack 4]

未关闭
  • 哪里不对？
#165 10 条评论 2 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

难度
3/5
预计耗时
1-2 天
新手友好度
35/100
Issue 类型
缺陷
描述清晰度
基本清楚
活跃度
停滞
技术栈
javascript
领域
build-system, frontend

调研方向

使用所示的 style-loader、css-loader、postcss-loader 和 less-loader 配置，复现 my.module.less 的 webpack 4.1.1 输出。将生成的模块输出以及 localIdentName 的处理方式与之前的输出进行比较；完成标准是确定 [path] 是否被 loader 链省略，并在该行为是 bug 的情况下添加或确定一个回归测试。

由索引模型根据 Issue 内容生成。

描述

bug

my.module.less in chrome devtools
Before webpack 4.1.1

var escape = require("../../../node_modules/css-loader/lib/url/escape.js");
exports = module.exports = require("../../../node_modules/css-loader/lib/css-base.js")(true);
// imports


// module
exports.push([module.id, ".app-controllers-___header-module__header___...snip

// exports
exports.locals = {
	"header": "app-controllers-___header-module__header___2cDAd",
	"link": "app-controllers-___header-module__link___9ZF3f",
	"title": "app-controllers-___header-module__title___3zdsk",
	"versionName": "app-controllers-___header-module__versionName___P3mUm",
	"loggedInUser": "app-controllers-___header-module__loggedInUser___2g4NC",
	"settingsAndInfo": "app-controllers-___header-module__settingsAndInfo___3tMjw",
	"usernameLabel": "app-controllers-___header-module__usernameLabel___12VlL",
	"userOptionsList": "app-controllers-___header-module__userOptionsList___392Md",
	"userOptionsListItem": "app-controllers-___header-module__userOptionsListItem___1axLL",
	"readonlyLabel": "app-controllers-___header-module__readonlyLabel___3TM1g",
	"outdatedStyle": "app-controllers-___header-module__outdatedStyle___1Hj_P",
	"outdatedLink": "app-controllers-___header-module__outdatedLink___3w-ME"
};

After webpack 4.1.1:

var escape = require("../../../node_modules/css-loader/lib/url/escape.js");
exports = module.exports = require("../../../node_modules/css-loader/lib/css-base.js")(true);
// imports


// module
exports.push([module.id, ".___header-module__header_...snip
// exports
exports.locals = {
	"header": "___header-module__header___2hFEv",
	"link": "___header-module__link___3788-",
	"title": "___header-module__title___1ltkk",
	"versionName": "___header-module__versionName___PiO_N",
	"loggedInUser": "___header-module__loggedInUser___3rJB5",
	"settingsAndInfo": "___header-module__settingsAndInfo___3En63",
	"usernameLabel": "___header-module__usernameLabel___2IGNx",
	"userOptionsList": "___header-module__userOptionsList___NyxVd",
	"userOptionsListItem": "___header-module__userOptionsListItem___3U7ZZ",
	"readonlyLabel": "___header-module__readonlyLabel___1XVj-",
	"outdatedStyle": "___header-module__outdatedStyle___2aBI2",
	"outdatedLink": "___header-module__outdatedLink___3RjtB"
};

My rule:

{
    test: /\.module\.less$/,
    use: [
        {
            loader: "style-loader",
            options: { sourceMap: true }
        },
        {
            loader: "css-loader",
            options: {
                sourceMap: true,
                modules: true,
                importLoaders: 1,
                localIdentName: "[path]___[name]__[local]___[hash:base64:5]"
            }
        },
        {
            loader: "postcss-loader",
            options: {
                sourceMap: true,
                plugins: loader => [
                    require("postcss-import")({
                        root: loader.resourcePath
                    }),
                    require("postcss-cssnext")({
                        warnForDuplicates: false
                    }),
                    require("postcss-csso")({
                        zindex: false
                    })
                ]
            }
            // publicPath: ""
        },
        {
            loader: "less-loader",
            options: { sourceMap: true }
        }
    ]
};

I'm guessing here that [path] is the item missing in the output.
Any thoughts? Is this a bug?

主要语言
JavaScript
星标
2k
派生
159
30 天内没有已合并 PR

环境准备

这个项目没有提供开发容器、Dockerfile 或贡献指南，环境需要你自己搭建：先看它的 README，通用步骤见我们的新手贡献指南。

从这里开始

  1. 先读完整个 Issue，再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库，在一个分支上完成修改。
  4. 提交 Pull Request，并在描述里引用这个 Issue 编号。

gajus/babel-plugin-react-css-modules 的其他 Issue

查看 gajus/babel-plugin-react-css-modules 的全部 Issue

相似的 Issue

更多 JavaScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。