Question

我正在尝试通过 less-loader ，然后通过 css-loader 获取我们的.less文件，最后通过 style-loader ，根据 Less Loader docs 。

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

我的webpack配置如下，在module.rules [] ...：

＆＃xA;＆＃xA;

 下{＆＃XA;测试：/\。css $ /，＆＃xA;使用：['style-loader'，'css-loader']＆＃xA; }，＆＃XA; {＆＃XA; test：/\.less$ /，＆＃xA;使用：[{＆＃xA; loader：“style-loader”//从JS字符串创建样式节点＆＃xA; }，{＆＃xA; loader：“css-loader”//将CSS翻译成CommonJS＆＃xA; }，{＆＃xA; loader：“less-loader”，＆＃xA; //选项：{＆＃xA; //路径：[＆＃xA; // path.resolve（__ dirname，'../ without'）＆＃xA; //]＆＃xA; //} //汇编较少的CSS＆＃xA; }]＆＃XA; }，＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

我的 resolve 如下

＆＃xA; ＆＃xA;

  resolve：{＆＃xA;扩展：['。js'，'。vue'，'。json'，'。without']，＆＃xA;别名：{＆＃xA; '@'：resolve（'public / js'），＆＃xA; }，＆＃XA;模块：['less'，'node_modules']＆＃xA;}，＆＃xA;

＆＃xA;＆＃xA;

我也试过，在模块下， path.resolve（__ dirname，'.. / without')

我的目录结构是

＆＃ XA;＆＃XA;

<代码>项目/建造/ webpack.config.js

＆＃XA;＆＃XA;

<代码>项目/少/ *少（少文件）

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

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

＆＃xA;＆＃xA;

（我试图保持代码简洁，只包括相关部分 - 很乐意提供更多信息）

＆＃xA;

Answer 1

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

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

问候。

带有Style-Loader的Webpack Less-Loader不会注入<style>标记

1 个答案: