vue-cli 2.-中导入公共less文件的方法步骤

Vue CLI 2中公共Less文件的轻松导入——长沙网络推广经验分享

在Vue CLI 2的世界里，如何导入公共Less文件可能是一个让许多开发者头疼的问题。但在长沙网络推广的实践中，我发现了一个简便的方法，今天就来和大家分享一下，希望能给各位带来一些启示和帮助。

我们需要借助webpack中的资源预处理器，因此请确保你已经安装了`style-resources-loader`。你可以通过npm进行安装：

```bash

npm i style-resources-loader -D

```

接下来，我们要对`build/utils.js`文件中的CSS预处理器的实现方式进行一些调整。具体地，我们需要关注`generateLoaders`这个函数。

这个函数的主要作用是生成对应类型的样式加载器。我们需要确保对于less文件的加载，除了原有的加载器外，还要加入`style-resources-loader`。这样，当webpack遇到less文件时，就会用这个新的加载器来处理。

具体实现如下：

在原有的加载器判断逻辑之后，我们可以增加一个判断语句，专门针对less加载器进行处理：

```javascript

if (loader == 'less'){

loaders.push({

loader: 'style-resources-loader',

options: {

patterns: path.resolve(__dirname, '../src/assets/config/.less') // 请根据实际情况调整路径

}

})

}

```

这样设置后，webpack在处理less文件时，就会自动使用`style-resources-loader`来导入我们的公共Less文件。这样，我们就可以轻松地在Vue CLI 2中导入公共Less文件了。

以上就是长沙网络推广带来的分享，希望对大家的学习和实践有所帮助。也请大家多多支持我们的分享，一起进步！如有更多疑问或经验，欢迎交流。让我们一起在编程的道路上越走越远！