Webpack Less-Loader with Style-Loader not 注入<style>标签

Question

我正在尝试让我们的 .less 文件由less-loader，然后由css-loader，最后由style-loader注入到 HTML 文件中，根据 Less Loader 文档。

我没有收到任何错误或警告，但样式没有以任何方式注入或存在。

我的 webpack 配置如下，在 module.rules[]...：

{
test: /.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader",
// options: {
//     paths: [
//         path.resolve(__dirname, '../less')
//     ]
// } // compiles Less to CSS
}]
},
}

我的resolve如下

resolve: {
extensions: ['.js', '.vue', '.json', '.less'],
alias: {
'@': resolve('public/js'),
},
modules: ['less', 'node_modules']
},

我也尝试过，在modules下，path.resolve(__dirname, '../less')

我的目录结构是

project/build/webpack.config.js

project/less/*.less(更少的文件)

我还尝试使用上面未注释的注释"选项"，根据较少加载器的文档直接指向较少的目录。

将这些较少的样式编译为 CSS 并作为样式标签注入，我缺少什么？

我包括.css测试，因为我很好奇那里是否发生了某种冲突。它用于从node_modules注入引导 css 文件，该文件工作正常。

(我试图保持代码简短，只包含相关部分 - 很高兴提供更多)

Answer 1

您需要以这种方式将.less文件导入.js文件中，webpack 加载器将找到它们并使其工作。

在这里，我有一个带有一些配置的存储库，我认为它将帮助您解决以后将面临的一些问题。(是的，它变得更狂野了一点)

问候。