具有Style-Loader的Webpack Less-Loader不注入< style>标签 [英] Webpack Less-Loader with Style-Loader not injecting <style> tag

问题描述

我正在尝试让我们的.less文件先由less-loader然后由css-loader拾取，最后由style-loader根据

I'm trying to have our .less files picked up by less-loader, then by css-loader, and finally injected into the HTML file by style-loader, as per the Less Loader docs.

我没有收到任何错误或警告，但是没有以任何方式插入或显示样式.

I am not getting any errors or warnings, but the styles are not injected or present in any way.

我的webpack配置如下，位于module.rules [] ...下:

My webpack config is as follows, under 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目录.

I have also tried with the commented "options" above uncommented, to point directly at the less directory, as per the less-loader docs.

我缺少将这些较少的样式编译为CSS并作为样式标签注入的东西吗?

What am I missing to have these less styles compiled to CSS and injected as a style tag?

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

I included the .css test because I'm curious if maybe there's some sort of conflict happening there. It's being used to inject the bootstrap css file from node_modules, which is working properly.

(我试图使代码简短，只包含相关部分-乐于提供更多内容)

(I tried to keep the code brief and only including relevant portions - happy to provide more)

推荐答案

您需要将.less文件导入到.js文件中，这样Webpack loader才能找到它们并使之工作.

You need to import your .less files in your .js files in this way webpack loader will find them and make it work.

这里我有一个带有某些配置的仓库它将帮助您解决一些稍后会遇到的问题. (是的，它变得有点荒唐了)

Here I have a repo with some configuration and I think it will help you with some issues that you'll face later. (Yeah it becomes a little bit wilder)

致谢.

这篇关于具有Style-Loader的Webpack Less-Loader不注入< style>标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！