带有样式加载器的Webpack较少加载器未注入<style> tag

Question

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

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

我的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注入bootstrap css文件，该文件工作正常。

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

Answer 1

您需要通过这种方式将.less文件导入.js文件中，这样webpack loader才能找到它们并使之工作。

在这里，我有一个带有一些配置的存储库，我认为它将对您以后遇到的一些问题有所帮助。 （是的，它变得有点荒野了）

问候。