本篇文章给大家带来了关于javascript的相关知识,其中主要介绍了关于webpack打包less或sass资源的相关问题,包括了使用less-loader和sass-loader插件的相关内容,下面一起来看一下,希望对大家有帮助。
【相关推荐:javascript视频教程、web前端】
less 下载 less包和less-loader
sass 下载node-sass和sass-loader
webpack.config.js
module: { //css打包规则 rules: [{ test: /\.css$/, //把项目中所有以.css结尾的文件打包,插入到html里 use: ["style-loader","css-loader"] //css兼容loader,单独的css文件 }, { test: /\.less$/, use: ["style-loader","css-loader","less-loader"] //从右到左,内联样式 },{ test: /\.scss$/, use: ["style-loader","css-loader","sass-loader"] }] },
lessstyle.less
@width:200px; @height:200px; @color:red; body { margin: 0; padding: 0; } p { color: @color; font-size: 25px; } h1 { color: blue; font-size: 88px; } .box2 { width: @width; height: @height; background-color: @color; }
sassstyle.scss
$w:50px; $h:100px; .box3 { width: $w; height: $h * 3; background-color: greenyellow; color: bisque; }
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>商城首页~~~~~~</h1> <p>打包css</p> <div> this is a box1 </div> <div> this is a box2 </div> <div> this is a box3 </div> </body> </html>
index.js
require("../css/style.css") require("../css/lessstyle.less") require("../css/sassstyle.scss") console.log("首页专用js文件");
执行webpack
html页面
【相关推荐:javascript视频教程、web前端】
以上就是webpack打包less或sass资源详解的详细内容,更多请关注php中文网其它相关文章!