webpack入门demo（三）打包sass和less

打包sass，less   

和css的方法差不多，一模一样的

就是需要多安装两个包

less需要安装的：

cnpm i less less-loader -D

sass需要安装的：

cnpm i node-sass sass-loader -D

 

随便写各写一个sass和less文件，index.scss  和demo.less

为了方便都写在同级好了

 

 

修改配置config文件webpack.config.js：

module.exports={
    entry:"./entry.js",
    output:{
        filename:"bundle.js",
        path:__dirname,
    },
    module:{
        rules:[ //匹配规则
            {test:/\.css$/,loader:'style-loader!css-loader'},
            {test:/\.scss$/,loader:'style-loader!css-loader!sass-loader'},
            {test:/\.less$/,loader:'style-loader!css-loader!less-loader'},
        ]
    }
}

上面这种module  loader写法可以，也可以用另一种use的写法

注意loader后面跟字符串  use的话后面跟对象

 

修改entry.js入口文件：

require("./style.css")
require("./index.scss")
require("./demo.less")

重新webpack entry.js bundle.js

运行index.html  less和sass就会生效啦！

如果没有装webpack-dev-server（就是挂载的一个工具，有实时刷新的效果，类似nodemon）的话，记得每次改了都要重新webpack打包哦~