Webpack 使用网页包中的文件加载器导入较少的文件

我想使用文件加载器生成版本较少的文件导入

<link rel="stylesheet/less" type="text/css" href="/static/styles.<VERSION/HASH>.less" />

在

main.js

中

我只在版本控制时需要它（每次修改

样式.less

文件时自动重命名文件），我不想在编译时编译得更少，因为我在运行时使用

less.modifyVars

。所以我用

import '@/assets/less.min.js'

它搜索并编译

rel=“stylesheet/less”

标记。 当我在index.html中手动添加

<link rel="stylesheet/less" type="text/css" href="/static/styles.less" />

但在编译过程中，我得到：

ERROR  Failed to compile with 1 errors                                                                           13:05:04

This dependency was not found:

* @/assets/styles.less in ./src/main.js

To install it, you can run: npm install --save @/assets/styles.less

---

下面的配置工作正常。您可以在上找到此示例

src/main.js：

从“@/assets/styles.less”导入
log（`您根本不需要在这里导入更少的文件，只需要在index.ejs中导入，但是如果您需要引用，那么它就在那里：${a}`）；

资产/风格。较少

//变量
@链接颜色：#428bca；//海蓝
@链接颜色悬停：变暗（@link color，10%）；
//用法
A.
.链接{
颜色：@链接颜色；
}
a:悬停{
颜色：@链接颜色悬停；
}
.小部件{
颜色：#fa0；
背景：@链接颜色；
}

webpack.config.js：

const HtmlWebpackPlugin=require（“html网页包插件”）；
const path=require（'路径'）
module.exports={
条目：['./src/main.js']，
插件：[
新的HtmlWebpackPlugin（{template:'src/index.ejs'}），
],
devtool:“#源映射”，
决心：{
扩展：['.less'，'.js']，//不需要
别名：{'@'：path.resolve（{u dirname，'src'）}
},
模块：{
规则：[
{
测试：/\.减去$/,，
加载器：“文件加载器”，
选项：{
publicPath:“”，//您可以重写此选项以在不同文件夹中放置较少的输出
name:'static/[name].[ext]？[sha512:hash:base64:6]。//我猜您希望文件名在修改后保持不变
}
},
],
},
};

src/index.ejs：

标题

请注意，下面的异常说明它找不到文件

@/assets/styles.less

。请确保指定了正确的路径，如果使用别名而不是相对路径，则在

webpack.config.js

中具有正确的别名

编译错误失败，有1个错误
13:05:04

未找到此依赖项：

• @//src/main.js中的assets/styles.less

要安装它，可以运行：npm install--save@/assets/styles.less

{
    test: /\.less$/,
    loader: 'file-loader',
},

ERROR  Failed to compile with 1 errors                                                                           13:05:04

This dependency was not found:

* @/assets/styles.less in ./src/main.js

To install it, you can run: npm install --save @/assets/styles.less