less-loader模块构建失败，带有~import

Question

我正在尝试使用webpack编译成较少的css

对于less-loader，我的模块构建失败了

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

我不想删除〜而且我已经读过webpack 4认为这是在node modules文件夹中？ 我也不想在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';