vue里引用less，并且less单独成一个文件引入

最新推荐文章于 2024-04-02 17:21:10 发布

是程序员呀

最新推荐文章于 2024-04-02 17:21:10 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：单独引入less文件 css module 文章标签： vue less

本文链接：https://blog.csdn.net/weixin_41798613/article/details/106903560

本文介绍如何在Vue项目中通过CSS Module方式引用单独的LESS文件。首先需要安装less及依赖，然后在webpack配置中进行相应设置。如果遇到问题，如loaderContext.getResolve报错，可能需要降低less的版本。在Vue组件中，可以使用import语句导入LESS文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue里引用less有好几种用法，有引入后在vue文件里style标签里的写法，也有module的写法。本文讲的是module的写法，其本质就是css module，并且将less文件单独成一个文件引入。
安装 less 与依赖

npm install less less-loader --save-dev

配置
在webpack.base.conf.js中，配置

const ExtractTextPlugin = require("extract-text-webpack-plugin");
const extractLess = new ExtractTextPlugin({
   
    filename: "[name].[contenthash].css",
    disable: process.env.NODE_ENV === "development"
});

module: {
   
	 rules: [
			{
   
				test: /\.less$/,
				use: extractLess<