用于 node_modules 的 webpack 更少的加载器覆盖变量

Question

我的项目结构如下：

• Proj.A：包含所有较少文件（样式、mixin、变量等）的回购
• 结束项目
  • 需要 Proj.A
  • 具有config.less，它设置了在 Proj.A 上定义的更少 @variables
  • 预计下面的所有组件也需要 Proj.A 来获取在config.less 中设置的覆盖值
• 组件（通过npm install 安装在最终项目中）
  • 还需要 Proj.A 来处理更少的文件（样式、混合、变量等）
  • 通过js要求其风格，如require('index.less')
  • 如果 Proj.A 中定义的变量未被覆盖，则使用默认值。

为了更好的简化，有一个例子：

项目A

/*index.less*/

// declare all my variables
@bg-color: pink

组件

/* component.js */    
require('component.less')


/* component.less */    
@import '~projA/index.less'

结束项目

/* index.js */    
require('config.less')
var myComponent = require('component')

/* config.less */    
@import '~projA/index.less'
@bg-color: blue

webpack 配置（这是一个超级简单的 webpack 配置，唯一特别的就是少了个加载器）

{
    loaders: [
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract('css?sourceMap!less?sourceMap&strictMath')
      }
    ]
}

我希望如果我需要 Component 隔离，它应该得到一个 @bg-color: pink。但是如果End Project 需要它，它应该得到一个@bg-color: blue。

现在它离开了pink。有没有办法告诉webpack | less-loader 不要单独捆绑或与特定的node_modules 有某种关联。我想知道如何解决这个问题，也许创建一个新的 loader ？

谢谢！

Answer 1

如果您控制所有部分，则非常简单的解决方案（可能有点hacky）：

组件

/* component.js */    
require('component.less')

/* component.less */    
@import '~projA/index.less'
@import (optional) "@{THEME}"; /* if optional works, not tested */

结束项目

/* index.js */    
var myComponent = require('component')

/* config.less */
@bg-color: blue

webpack 配置

{
    loaders: [
      {
        test: /\.less$/,
        loader: ExtractTextPlugin.extract('css?sourceMap!less?{"modifyVars":{"THEME":"\'' + path.resolve('config.less') + '\'"}}')
      }
    ]
}

Answer 2

没有你的 webpack 配置，很难说你到底在做什么，所以我只能告诉你我知道的。

我过去所做的就是为我的样式使用链式加载器（style！css！less）。样式加载器中有一个漂亮的功能，用于“引用计数样式”或者我喜欢称它们为可用的。

这个想法是你的组件可以“使用”和“不使用”更少的文件，webpack 样式加载器会根据需要从 DOM 中添加/删除这些文件，这样你就可以更好地控制加载的样式和未加载。

See this github page 了解更多信息。