带有 Style-Loader 的 Webpack Less-Loader 不注入 <style> 标签答案

【问题标题】：Webpack Less-Loader with Style-Loader not injecting <style> tag带有 Style-Loader 的 Webpack Less-Loader 不注入 <style> 标签
【发布时间】：2023-12-27 06:06:02
【问题描述】：

我试图让我们的 .less 文件由 less-loader 提取，然后由 css-loader 提取，最后由 style-loader 注入 HTML 文件，根据 Less Loader docs.

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

我的 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（更少文件）

根据 less-loader 文档，我还尝试使用上面未注释的注释“选项”直接指向 less 目录。

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

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

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

【问题讨论】：

你在.js文件中调用你的.less文件吗？
只是引导程序，我需要为 .less 的吗？我认为这是样式加载器的重点？我什至会指出什么？
我的意思是你需要在你的.js文件中导入它们import './main.less'，否则它将不起作用。
该死，这个勇敢的新模块世界与我习惯的完全不同！在导入较少的文件（并确保较少的文件使用它们使用的变量导入其他较少的文件）之后，它就可以工作了。您想提交您的评论作为答案吗？
哈哈是的，我明白了，我和你有同样的困惑，但是一旦你习惯了它就很好了，我一定会提交答案的。

标签： javascript webpack webpack-style-loader css-loader less-loader

【解决方案1】：

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

Here我有一个配置了一些配置的仓库，我认为它可以帮助您解决稍后将面临的一些问题。（是的，它变得有点狂野）

问候。

【讨论】：