在更少的加载器中导入全局变量

Question

在我的 webpack 配置中，我希望能够定义一个全局的少变量文件，该文件将包含在每个少组件中。

使用 sass-loader，您可以提供以下选项：

loaderOptions: {
data: "@import 'globals.sass'"
}

我能找到的较少加载器的唯一选择是 globalVars：

loaderOptions: {
globalVars: {}
}

现在，这工作正常，但 globalVars 需要一个具有键值对的对象。我宁愿有一个主题，在某个地方附加每个组件。使用较少的加载器可以做到这一点吗？

Answer 1

我建议将你的less-loader与text-transform-loader链接起来，就像这样：

rules: [{
test: /.js$/,
use: [
{ 
loader: 'less-loader',
options: //your normal options
},
{ 
loader: 'text-transform-loader',
options: {
prependText: '@import "../styles/theme.less"'
}
}
]
}]

请记住，最后一个 webpack 加载器是首先应用的，因此您可能希望将此加载器用作链中的最后一个加载器。如果您的较少文件嵌套在不同的深度，这很可能会中断，因为您的主题文件相对于每个文件将处于不同的深度。如果是这种情况，您可以将主题文件的全部内容附加到每个更少的文件中！

从此规则中排除您的theme.less文件也是一个好主意，否则您可能会得到一些奇怪的无限递归。

有关详细信息，请参阅 https://github.com/kmck/webpack-text-transform-loader。

Answer 2

在较少选项下有两种方法可以做到这一点：

1. 附加数据

additionalData: (content, loaderContext) => {
return `@import '~@/global.less';${content}`
}

2. >less选项

lessOptions: {
modifyVars: {
// you should config resolve alias option for @
[any key name you like]: `true;@import'~@/global.less';`,
},
}

它们是相同的结果和原则，除了 extraalData 可以追加或追加，而 modifyVars 只能追加。更多详细信息可以在较少加载器的源代码中找到。

Answer 3

这就是我的做法：

rules: [{
test: /.less$/,
use: [{
loader: 'less-loader',
options: {
javascriptEnabled: true
}
},
{
loader: 'style-resources-loader',
options: {
patterns: [
path.resolve(__dirname, 'src/application/less/variables.less'),
path.resolve(__dirname, 'src/application/less/flex.less'),
path.resolve(__dirname, 'src/application/less/functions.less'),
]
}
}]
}]