Question

我有以下项目结构：

Proj.A：Repo包含所有较少的文件（样式，混合，变量等）
结束项目
- 需要Proj.A
- config.less设置了在Proj.A上定义的@variables
- 预计下面的所有组件也要求Proj.A获取config.less
组件（通过npm install安装在End Project中）
- 还需要Proj.A以减少文件（样式，混合，变量等）
- 需要js的样式，例如require('index.less')
- 如果Proj.A中定义的变量未被覆盖，则使用默认值。

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

Proj.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 config （这是一个超级简单的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 config

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

Answer 2

如果没有您的网络包配置，很难说出您正在做什么，所以我只能告诉您我所知道的。

我过去所做的事情是使用链式装载机为我的风格（风格！css！less）。样式加载器在其中有一个很好的功能，用于＆＃34;引用计数样式＆＃34;或者我喜欢称它们为可用物。

这个想法是你的组件可以＆＃34;使用＆＃34;和＆＃34;不使用＆＃34;更少的文件和webpack样式加载器将根据需要从DOM中添加/删除这些较少的文件，这样您就可以更多地控制加载和未加载的样式。

See this github page了解更多信息。

webpack less loader覆盖node_modules的变量

2 个答案: