HBuilderX之Vue项目---css配置
接着上次Vue项目js文件后的css文件配置说明一.首先说个题外话:可以用cnpm i html-webpack-pluagin -D命令,在内存中根据index.html模板页面生成HTML插件(此命令会将html文件托管到内存中)同样也需要配置webpack.config.js文件const htmlWebpackPlugin = require('html-webpack-plugi...
·
接着上次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
安装下缺少的这个包就可以了。
更多推荐
已为社区贡献3条内容
所有评论(0)