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

Question

我正在尝试让 less-loader 提取我们的 .less 文件，然后 css-loader，最后 style-loader 将其注入 HTML 文件，根据 Less Loader docs.

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

我的webpack配置如下，在module.rules[]...:[=22=]下

{
     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（较少文件）

我也尝试过取消注释上面的注释 "options"，根据 less-loader 文档直接指向 less 目录。

将这些 less 样式编译为 CSS 并作为样式标签注入，我错过了什么？

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

（我尽量保持代码简短，只包含相关部分 - 很乐意提供更多）

Answer 1

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

Here 我有一个带有一些配置的回购协议，我认为它可以帮助您解决稍后会遇到的一些问题。（是的，它变得有点狂野）

此致。

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

Webpack Less-Loader with Style-Loader not injecting <style> tag

javascript

webpack

webpack-style-loader

css-loader

less-loader