javascript - Webpack Less-Loader 与 Style-Loader 不注入(inject) <style> 标签

Question

我试图让 .less 文件先由 less-loader 获取，然后由 css-loader 获取，最后由 注入(inject)到 HTML 文件中>style-loader，按照Less Loader docs.

我没有收到任何错误或警告，但样式没有以任何方式注入(inject)或存在。

我的 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: {
    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 并作为样式标签注入(inject)，我缺少什么？

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

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

Answer 1

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

Here我有一个带有一些配置的存储库，我认为它将帮助您解决稍后将遇到的一些问题。 (是的，它变得有点狂野)

问候。