没有注入样式加载器的Webpack Less-Loader 标签

Question

我试图让less-loader，然后css-loader获取我们的.less文件，最后由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目录，根据less-loader文档。

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

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

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

Answer 1

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

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

问候。