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
Title商城首页~~~~~~
打包css
this is a box1this is a box2this is a box3
index.js
require("../css/style.css") require("../css/lessstyle.less") require("../css/sassstyle.scss") console.log("首页专用js文件");
执行webpack
html页面
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。