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