HBuilderX之Vue项目---css配置

接着上次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
安装下缺少的这个包就可以了。

你可能感兴趣的:(HBuilderX之Vue项目---css配置)