less-loader 模块构建失败 ~ import答案

【问题标题】：less-loader module build fail with ~ importless-loader 模块构建失败 ~ import
【发布时间】：2019-05-20 04:29:29
【问题描述】：

我正在尝试使用 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
        }
    ]
});

【问题讨论】：

标签： css webpack less

【解决方案1】：

不要在波浪号 (~) 后使用斜杠，否则会解析到当前文件夹。

所以假设你的 node_modules 中有一个名为“styles”的模块，那么你需要：

@import '~styles/obj.less';

【讨论】：