less-loader模块构建失败，并显示~ import

Question

我正试着用webpack把less编译成css

对于less-loader，我得到了一个失败的模块构建

 near lines:
   /* this is a comment */
   @import '~/styles/obj.less';

我不想删除~，我读到过，webpack 4认为这是在节点模块文件夹中？我也不想添加来自import语句的.less。我正在尝试理解如何在不破坏构建和寻找解决方案的情况下使用代字号。

这是我的webpack配置规则部分

    config.module.rules.push({
    test: /\.less$/,
    include: path.resolve(__dirname, '../src/'),
    use: [
        {
            loader: "style-loader"
        },

        {
            loader: "css-loader",

        },
        {
            loader: "less-loader", // compiles Less to CSS
        }
    ]
});

Answer 1

不要在代字号(~)后使用斜杠，否则它会解析为当前文件夹。

因此，假设您的node_modules中有一个名为"styles“的模块，那么您需要：

@import '~styles/obj.less';