HBuilderX之Vue项目---css配置

最新推荐文章于 2025-04-20 21:36:14 发布

电脑有点热

最新推荐文章于 2025-04-20 21:36:14 发布

阅读量5.8k

点赞数 2

分类专栏： vue.js之HBuilderX

本文链接：https://blog.csdn.net/includeCSDN/article/details/89643471

版权

vue.js之HBuilderX 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何使用webpack配置CSS文件，包括利用html-webpack-plugin生成内存中的HTML页面，以及如何在js文件中正确引用css资源。同时，阐述了处理非js文件所需的第三方加载器安装及配置方法。

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

接着上次Vue项目js文件后的css文件配置说明

一.首先说个题外话：

可以用cnpm i html-webpack-pluagin -D命令，在内存中根据index.html模板页面生成HTML插件(此命令会将html文件托管到内存中)
同样也需要配置webpack.config.js文件

const htmlWebpackPlugin = require('html-webpack-plugin')
modele.exports={
plugins:[
		new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件
			template:path.join(__dirname,'./src/index.html'),//指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
			filename:'index.html'//指定生成页面的名称
		})
	    ]
}

2.需要注意：引用css文件不是在html文件头部引用了，而是在js文件中引用

在这里插入图片描述
注意：
1.webpack默认只能打包处理js类型文件，无法处理其他类型文件。处理非js文件，需手动安装第三方加载器
3.css文件：安装cnpm i style-loader css-loader -D
4.打开webpack.config.js文件进行相关配置。

module.exports = {
	//作用：用于配置所有第三方模块加载器
	module:{
		rules:[//第三方匹配规则
			{test:/\.css$/,use:['style-loader','css-loader']},
		]
	}
}

5.其他sass，less文件引用配置方法和css文件相同
若报警告：
WARN：REQUIRES A PEER OF LESS@xxx(版本号) but none was installed
安装下缺少的这个包就可以了。