我可以在 Webpack 中全局公开 .less/.scss 参考文件吗？答案

【问题标题】：Can I expose a .less/.scss reference file globally in Webpack?我可以在 Webpack 中全局公开 .less/.scss 参考文件吗？
【发布时间】：2017-01-25 05:26:03
【问题描述】：

我们有一个使用带有 css 模块的 Webpack 的项目。要应用作用域命名空间，每个组件都有自己的 .less 文件。在该 .less 文件中，我们导入 common.less 文件以供参考，因此我们可以像这样使用它：

@import (reference) "../global.less";
.navbar { 
    .navbar;
}

这看起来相当复杂，但会导致封装类与其组件配对，并允许其他人在内部开发 global.less 文件，而无需使用 React。

我的问题是，除了冗余的类包装之外，导入这个相当大的 global.less 文件的每个组件似乎都在我们的 webpack 构建中增加了近一秒。

我很好奇是否有一种机制可以让我公开 global.less 的内容以便在这些文件中引用？我发现 Webpack 可以填充 js 模块。我本质上是在寻找 .less 或 .scss 等价物。

【问题讨论】：

标签： sass less webpack

【解决方案1】：

您可以添加commonChunkPlugin，然后添加您的global.less 路径，这样它只会在另一个js文件中编译一次。

here

【讨论】：

理想情况下，global.less 根本不会暴露在页面上。我们只会将它用于模块化（命名空间、封装等）组件级 css 中的引用。